/* Shared Poradna article components — editorial pilots 0.2.498. */
.oc-article {
  --oc-article-accent: #f2551c;
  --oc-article-accent-dark: #d94612;
  --oc-article-text: #344f67;
  --oc-article-heading: #303236;
  --oc-article-muted: #667786;
  --oc-article-border: #d9e0e5;
  --oc-article-soft: #f5f6f7;
  --oc-article-warm: #fff4ef;
  color: var(--oc-article-text);
  font-size: 16px;
  line-height: 1.72;
}

.oc-article *,
.oc-article *::before,
.oc-article *::after {
  box-sizing: border-box;
}

.oc-article > :first-child,
.oc-article > .oc-advice-article__media:first-child {
  margin-top: 0;
}

.oc-article h2,
.oc-article h3,
.oc-article h4 {
  color: var(--oc-article-heading) !important;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.oc-article h2 {
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.24;
  margin: 2.5rem 0 1rem !important;
}

.oc-article h3 {
  font-size: clamp(1.14rem, 2vw, 1.32rem);
  line-height: 1.35;
  margin: 1.65rem 0 .55rem !important;
}

.oc-article h4 {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 1.35rem 0 .45rem !important;
}

.oc-article p,
.oc-article li {
  overflow-wrap: anywhere;
}

.oc-article .oc-lead {
  color: #314b60;
  font-size: clamp(1.08rem, 2.3vw, 1.26rem);
  line-height: 1.65;
  margin: 0 0 2rem;
}

.oc-article figure,
.oc-article picture,
.oc-article img {
  max-width: 100%;
}

.oc-article img {
  height: auto !important;
}

/*
 * Some archived solar articles still contain Bootstrap-era inline grid widths
 * (for example width:1170px on .annot/.body). Keep their content, but prevent
 * those historical wrappers from escaping the current CMS column.
 */
.oc-article > .annot,
.oc-article > .body {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.oc-article .oc-article__media {
  background: var(--oc-article-soft);
  margin: 0 0 1.75rem;
  overflow: hidden;
}

.oc-article .oc-article__media img {
  display: block;
  height: auto !important;
  width: 100%;
}

.oc-article--unified > p:not([class]) {
  max-width: 74ch;
}

.oc-article .oc-article-hero,
.oc-article .oc-image-pair {
  margin: 0 0 1.75rem;
}

.oc-article .oc-article-hero {
  background: var(--oc-article-soft);
  overflow: hidden;
}

.oc-article .oc-article-hero img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.oc-article .oc-image-pair {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oc-article .oc-image-pair figure {
  background: var(--oc-article-soft);
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.oc-article .oc-image-pair img {
  display: block;
  width: 100%;
}

/* Compact comparison and situation cards. */
.oc-article .oc-card-grid,
.oc-article .oc-steps {
  display: grid;
  gap: .9rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 1.15rem 0 2.15rem;
}

.oc-article .oc-card,
.oc-article .oc-step {
  background: #fff;
  border: 1px solid var(--oc-article-border);
  border-top: 3px solid var(--oc-article-accent);
  min-width: 0;
  padding: 1.1rem 1.15rem;
}

.oc-article .oc-card h3,
.oc-article .oc-step h3 {
  font-size: 1.12rem;
  margin: 0 0 .55rem !important;
}

.oc-article .oc-card > :last-child,
.oc-article .oc-step > :last-child {
  margin-bottom: 0;
}

.oc-article .oc-card--recommend {
  background: var(--oc-article-warm);
}

.oc-article .oc-step {
  background: var(--oc-article-soft);
  border-top-width: 1px;
  border-left: 4px solid var(--oc-article-accent);
  position: relative;
}

.oc-article .oc-step__number {
  align-items: center;
  background: var(--oc-article-accent);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .84rem;
  font-weight: 800;
  height: 1.75rem;
  justify-content: center;
  line-height: 1;
  margin-right: .4rem;
  vertical-align: .08em;
  width: 1.75rem;
}

.oc-article .oc-step > .oc-step__number {
  float: left;
  margin: .05rem .65rem .25rem 0;
}

.oc-article .oc-measure-example,
.oc-article .oc-formula {
  background: #fff;
  border: 1px solid var(--oc-article-border);
  color: var(--oc-article-heading);
  font-weight: 700;
  padding: .75rem .85rem;
}

.oc-article .oc-formula {
  border-left: 4px solid var(--oc-article-accent);
  margin: 1rem 0 1.5rem;
  text-align: center;
}

/* Compact diagrams explain the glazing structure without another stock photo. */
.oc-article .oc-glazing-figure {
  margin: 1.4rem 0 2rem;
}

.oc-article .oc-diagram-grid,
.oc-article .oc-status-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: minmax(0, 1fr);
}

.oc-article .oc-diagram-card,
.oc-article .oc-status-card {
  background: var(--oc-article-soft);
  border: 1px solid var(--oc-article-border);
  min-width: 0;
  padding: 1rem 1.1rem;
}

.oc-article .oc-diagram-card h3,
.oc-article .oc-status-card h3 {
  margin: 0 0 .45rem !important;
}

.oc-article .oc-glazing-diagram {
  background: #fff;
  display: block;
  height: auto;
  margin: .7rem auto 0;
  max-width: 26rem;
  width: 100%;
}

.oc-article .oc-glazing-diagram__glass {
  fill: #d6ecf7;
  stroke: #557187;
  stroke-width: 3;
}

.oc-article .oc-glazing-diagram__space {
  fill: #f8fbfd;
  stroke: #cad6df;
  stroke-width: 2;
}

.oc-article .oc-glazing-diagram__spacer {
  fill: var(--oc-article-accent);
  opacity: .9;
}

.oc-article .oc-glazing-diagram text {
  fill: var(--oc-article-heading);
  font: 700 17px Arial, sans-serif;
}

/* Explanatory window/profile diagrams used by the editorial pilots. */
.oc-article .oc-window-card__icon,
.oc-article .oc-window-choice-diagram,
.oc-article .oc-profile-diagram {
  background: transparent;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 28rem;
  width: 100%;
}

body.oc-advice-page #main .page-content .oc-article img.oc-window-card__icon {
  max-width: 9.1667rem !important;
}

body.oc-advice-page #main .page-content .oc-article img.oc-window-choice-diagram {
  max-width: 12rem !important;
}

/*
 * Opening diagrams are the same SVG assets as in the configurator. Each card
 * uses the same neutral grey surface, including the field around the symbol.
 * No selected/orange or alternating white card background is used.
 */
.oc-article .oc-window-card,
.oc-article .oc-diagram-card,
.oc-article .oc-window-card--soft {
  background: var(--oc-article-soft);
}

.oc-article .oc-opening-figure {
  align-items: center;
  background: var(--oc-article-soft);
  display: flex;
  justify-content: center;
  margin: 0 auto .85rem;
  min-height: 10.5rem;
  padding: .45rem;
  width: 100%;
}

.oc-article .oc-window-card--soft .oc-opening-figure,
.oc-article .oc-diagram-card .oc-opening-figure {
  background: var(--oc-article-soft);
}

.oc-article .oc-opening-figure--wide {
  min-height: 12.25rem;
  padding: .6rem;
}

.oc-article .oc-window-schematic__frame {
  fill: #fff;
  stroke: #536b7d;
  stroke-width: 8;
}

.oc-article .oc-window-schematic__fixed {
  fill: #dcecf5;
  stroke: #9fb8c8;
  stroke-width: 3;
}

.oc-article .oc-window-schematic__sash,
.oc-article .oc-window-schematic__open {
  fill: #edf5f9;
  stroke: #6a8293;
  stroke-linejoin: round;
  stroke-width: 4;
}

.oc-article .oc-window-schematic__handle,
.oc-article .oc-window-schematic__accent,
.oc-article .oc-window-schematic__accent-line {
  fill: var(--oc-article-accent);
  stroke: var(--oc-article-accent);
}

.oc-article .oc-window-schematic__mullion {
  fill: #536b7d;
}

.oc-article .oc-window-schematic__motion,
.oc-article .oc-window-schematic__accent-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.oc-article .oc-window-choice-diagram text,
.oc-article .oc-profile-diagram text {
  fill: var(--oc-article-heading);
  font: 700 18px Arial, sans-serif;
}

.oc-article .oc-profile-figure {
  background: var(--oc-article-soft);
  border: 1px solid var(--oc-article-border);
  margin: 1.35rem 0 1.75rem;
  padding: 1rem;
}

.oc-article .oc-profile-figure figcaption {
  color: var(--oc-article-muted);
  font-size: .9rem;
  margin-top: .75rem;
  text-align: center;
}

.oc-article .oc-profile-diagram__shell {
  fill: #fff;
  stroke: #536b7d;
  stroke-width: 12;
}

.oc-article .oc-profile-diagram__wall {
  fill: none;
  stroke: #9fb8c8;
  stroke-width: 6;
}

.oc-article .oc-profile-diagram__reinforcement {
  fill: #66737e;
  stroke: #3d4851;
  stroke-width: 5;
}

.oc-article .oc-profile-diagram__seal {
  fill: none;
  stroke: var(--oc-article-accent);
  stroke-width: 7;
}

.oc-article .oc-profile-diagram__air {
  fill: #dcecf5;
  stroke: #84a7bc;
  stroke-width: 3;
}

.oc-article .oc-profile-diagram__pointer {
  fill: none;
  stroke: var(--oc-article-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.oc-article .oc-metric-badge {
  align-items: center;
  background: var(--oc-article-accent);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 1.12rem;
  font-weight: 800;
  height: 3.15rem;
  justify-content: center;
  margin-bottom: .65rem;
  width: 3.15rem;
}

.oc-article .oc-window-card p {
  margin: .42rem 0;
}

.oc-article .oc-status-grid {
  margin: 1.15rem 0 2.15rem;
}

.oc-article .oc-status-card {
  border-top: 4px solid #56758e;
}

.oc-article .oc-status-card--normal {
  border-top-color: #3d8466;
}

.oc-article .oc-status-card--attention {
  border-top-color: #d99012;
}

.oc-article .oc-status-card--problem {
  border-top-color: var(--oc-article-accent);
}

.oc-article .oc-status-card > :last-child {
  margin-bottom: 0;
}

/* Recommendations, practical tips and warnings. */
.oc-article .oc-note {
  background: var(--oc-article-soft);
  border: 0;
  border-left: 4px solid #798794;
  color: var(--oc-article-text);
  margin: 1.6rem 0 2rem;
  padding: 1.1rem 1.2rem;
}

.oc-article .oc-note--recommend {
  background: var(--oc-article-warm);
  border-left-color: var(--oc-article-accent);
}

.oc-article .oc-note--tip {
  background: #f0f7f4;
  border-left-color: #3d8466;
}

.oc-article .oc-note--warning {
  background: #fff7e8;
  border-left-color: #d99012;
}

.oc-article .oc-note--info {
  background: #f1f5f8;
  border-left-color: #56758e;
}

.oc-article .oc-note__title,
.oc-article .oc-note > strong:first-child,
.oc-article .oc-note > p:first-child > strong:first-child {
  color: var(--oc-article-heading);
  display: block;
  font-weight: 800;
  margin-bottom: .35rem;
}

.oc-article .oc-note h2,
.oc-article .oc-note h3 {
  margin-top: 0 !important;
}

.oc-article .oc-note > :last-child {
  margin-bottom: 0;
}

/* A desktop table becomes readable labelled blocks on narrow screens. */
.oc-article .oc-table-wrap {
  margin: 1.25rem 0 .65rem;
  max-width: 100%;
  overflow: visible !important;
}

.oc-article .oc-compare-table {
  border: 1px solid var(--oc-article-border);
  border-collapse: collapse;
  display: table !important;
  margin: 0;
  min-width: 0 !important;
  width: 100%;
}

.oc-article .oc-compare-table th,
.oc-article .oc-compare-table td {
  border: 0;
  border-bottom: 1px solid var(--oc-article-border);
  padding: .78rem .9rem;
  text-align: left;
  vertical-align: top;
}

.oc-article .oc-compare-table th {
  background: #3b3b3b;
  color: #fff;
  font-weight: 750;
}

.oc-article .oc-compare-table tbody tr:nth-child(even) {
  background: var(--oc-article-soft);
}

.oc-article .oc-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.oc-article .oc-caption {
  color: var(--oc-article-muted);
  font-size: .92rem;
  font-style: italic;
  margin-top: .6rem;
}

/* Semantic lists keep their original text and gain only a visual marker. */
.oc-article .oc-check-list,
.oc-article .oc-warning-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.oc-article .oc-check-list > li,
.oc-article .oc-warning-list > li {
  padding-left: 1.65rem;
  position: relative;
}

.oc-article .oc-check-list > li::before,
.oc-article .oc-warning-list > li::before {
  color: var(--oc-article-accent);
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 0;
}

.oc-article .oc-check-list > li::before {
  content: '\2713';
}

.oc-article .oc-warning-list > li::before {
  color: #c87900;
  content: '!';
}

.oc-article .oc-summary {
  background: #fff;
  border: 1px solid var(--oc-article-border);
  border-top: 3px solid var(--oc-article-accent);
  margin: 2.45rem 0 0;
  padding: 1.25rem 1.3rem;
}

.oc-article .oc-summary h2 {
  margin-top: 0 !important;
}

.oc-article .oc-summary > :last-child {
  margin-bottom: 0;
}

.oc-article .oc-related {
  background: var(--oc-article-soft);
  border-top: 0;
  margin-top: 2rem;
  padding: 1.15rem;
}

.oc-article .oc-related h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin: 0 0 .85rem !important;
}

.oc-article .oc-related__grid {
  display: grid;
  gap: .65rem;
  grid-template-columns: minmax(0, 1fr);
}

.oc-article .oc-related__card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--oc-article-border);
  color: var(--oc-article-heading) !important;
  display: flex;
  font-weight: 750;
  min-height: 3.1rem;
  padding: .7rem 2.2rem .7rem .85rem;
  position: relative;
  text-decoration: none !important;
}

.oc-article .oc-related__card::after {
  color: var(--oc-article-accent);
  content: '\2192';
  font-size: 1.15rem;
  position: absolute;
  right: .85rem;
}

.oc-article .oc-related__card:hover {
  border-color: var(--oc-article-accent);
  color: var(--oc-article-accent-dark) !important;
}

.oc-article .oc-cta {
  align-items: center;
  background: #3b3b3b;
  color: #fff;
  display: grid;
  gap: 1rem;
  margin: 2.4rem 0 0;
  padding: 1.35rem;
}

.oc-article .oc-cta h2,
.oc-article .oc-cta h3,
.oc-article .oc-cta p {
  color: #fff !important;
  margin-top: 0 !important;
}

.oc-article .oc-cta p:last-child {
  margin-bottom: 0;
}

.oc-article .oc-cta a {
  background: var(--oc-article-accent);
  border: 2px solid var(--oc-article-accent);
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 46px;
  padding: .7rem 1.1rem;
  text-decoration: none !important;
}

.oc-article a:focus-visible,
.oc-article button:focus-visible {
  outline: 3px solid rgba(242, 85, 28, .34);
  outline-offset: 3px;
}

.oc-article .oc-final-cta__actions {
  display: grid;
  gap: .65rem;
  min-width: 0;
}

.oc-article .oc-cta .oc-final-cta__button--secondary {
  background: transparent;
  border-color: #fff;
}

.oc-article .oc-final-cta__actions a:hover {
  filter: brightness(1.1);
}

@media (min-width: 768px) {
  .oc-article .oc-cta.oc-final-cta--blinds { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (min-width: 768px) {
  .oc-article .oc-card-grid,
  .oc-article .oc-steps {
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oc-article .oc-card,
  .oc-article .oc-step {
    padding: 1.25rem 1.35rem;
  }

  .oc-article .oc-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1.6rem;
  }

  .oc-article .oc-diagram-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oc-article .oc-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .oc-article .oc-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .oc-article h2 {
    margin-top: 2.1rem !important;
  }

  .oc-article .oc-note,
  .oc-article .oc-summary,
  .oc-article .oc-related {
    padding: 1rem 1.05rem;
  }

  .oc-article .oc-image-pair {
    gap: .5rem;
  }

  .oc-article .oc-cta a {
    width: 100%;
  }

  .oc-article .oc-compare-table,
  .oc-article .oc-compare-table tbody,
  .oc-article .oc-compare-table tr,
  .oc-article .oc-compare-table td {
    display: block !important;
    width: 100%;
  }

  .oc-article .oc-compare-table thead {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .oc-article .oc-compare-table tr {
    background: #fff;
    border-bottom: 1px solid var(--oc-article-border);
    padding: .8rem .9rem;
  }

  .oc-article .oc-compare-table tbody tr:nth-child(even) {
    background: var(--oc-article-soft);
  }

  .oc-article .oc-compare-table tr:last-child {
    border-bottom: 0;
  }

  .oc-article .oc-compare-table td {
    border: 0;
    display: grid !important;
    gap: .65rem;
    grid-template-columns: minmax(7.6rem, .9fr) minmax(0, 1.1fr);
    padding: .18rem 0;
  }

  .oc-article .oc-compare-table td:first-child {
    color: var(--oc-article-heading);
    display: block !important;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: .3rem;
  }

  .oc-article .oc-compare-table td:not(:first-child)::before {
    color: var(--oc-article-muted);
    content: attr(data-label) ':';
    font-weight: 700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oc-article *,
  .oc-article *::before,
  .oc-article *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}