/* assets/css/components.css — komponenty wspoldzielone (patrz brief-szablon sekcja 3.3) */

/* ===================== HEADER / NAV ===================== */
.site-header {
  position: sticky; top: 0; z-index: 70;
  background: var(--pl-white);
  border-bottom: 1px solid var(--pl-border);
  padding: 14px 20px;
}
.site-header__inner {
  max-width: var(--container-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-logo { display: flex; align-items: baseline; gap: 1px; text-decoration: none; flex: none; }
.site-logo__main { font: 700 19px var(--font-display); color: var(--pl-text); }
.site-logo__accent { font: 700 19px var(--font-display); color: var(--pl-royal-light); }
.site-logo__tld { font: 500 12px var(--font-mono); color: var(--pl-text-caption); margin-left: 1px; }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav__link {
  font-size: 14px; font-weight: 500; color: var(--pl-text); text-decoration: none;
  white-space: nowrap; transition: color .2s;
}
.site-nav__link:hover { color: var(--pl-royal); }

.mobile-toggle {
  display: none;
  width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--pl-border);
  background: var(--pl-white); flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; flex: none;
}
.mobile-toggle span { width: 20px; height: 2px; background: var(--pl-text); display: block; }

.mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 16px 4px 6px; }
.mobile-menu.is-open { display: flex; }
.mobile-menu__link {
  font-size: 15px; font-weight: 500; color: var(--pl-text); text-decoration: none;
  padding: 13px 8px; border-bottom: 1px solid var(--pl-bg-alt);
}

@media (max-width: 1080px) {
  .site-nav { display: none; }
  .mobile-toggle { display: flex; }
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-block; border: none; border-radius: var(--radius-btn);
  font-weight: 600; font-size: 15px; padding: 15px 26px; text-decoration: none;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.btn--primary { background: var(--pl-coral); color: #fff; }
.btn--primary:hover { background: var(--pl-coral-hover); }
.btn--secondary-on-dark { border: 1px solid rgba(255,255,255,.35); color: #fff; background: transparent; }
.btn--secondary-on-dark:hover { border-color: var(--pl-hero-accent); color: var(--pl-hero-accent); }
.btn--outline { border: 1px solid var(--pl-border); color: var(--pl-text-secondary); background: none; }
.btn--sm { padding: 12px 20px; font-size: 13.5px; }

/* ===================== HERO ===================== */
.hero { position: relative; background: var(--pl-navy-deep); overflow: hidden; }
.hero__inner { position: relative; max-width: var(--container-w); margin: 0 auto; padding: 88px 24px 40px; min-height: 560px; }
.hero__content { position: relative; z-index: 5; max-width: 640px; }
.hero__title { font: 700 var(--fs-h1)/1.08 var(--font-display); color: #fff; margin: 0 0 20px; }
.hero__title-accent { color: var(--pl-hero-accent); }
.hero__lead { font-size: 18px; line-height: 1.6; color: var(--pl-hero-text-muted); margin: 0 0 28px; max-width: 560px; }
.hero__cta-group { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.hero__micro-trust { font: 500 12.5px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--pl-hero-micro); }

.hero__layers { position: absolute; inset: 0; pointer-events: none; }
.layer { will-change: transform; }
.layer--back { position: absolute; right: -4%; top: 6%; width: 56%; min-width: 320px; height: 78%; }
.layer--mid { position: absolute; right: -2%; top: 10%; width: 52%; min-width: 300px; height: 60%; }
.layer--front {
  position: absolute; right: 2%; top: 14%; width: 44%; min-width: 260px; height: 52%;
  overflow: hidden; border-radius: 8px;
}
.sheen {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sheenSweep 2.6s ease-in-out .4s 1 both;
}
@keyframes sheenSweep {
  0% { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  12% { opacity: .9; }
  88% { opacity: .9; }
  100% { transform: translateX(220%) skewX(-12deg); opacity: 0; }
}

.hero__prop-cards {
  position: relative; z-index: 6; margin-top: 52px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; max-width: 900px;
}
.prop-card {
  background: var(--pl-white); border: 1px solid var(--pl-border); border-radius: var(--radius-card);
  padding: 16px 18px; box-shadow: var(--shadow-soft);
  opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s;
}
.prop-card.is-in { opacity: 1; transform: none; }
.prop-card__eyebrow { font: 600 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pl-royal-light); margin-bottom: 8px; }
.prop-card__label { font: 600 15px var(--font-display); color: var(--pl-text); }

@media (prefers-reduced-motion: reduce) {
  .layer { transform: none !important; }
  .prop-card { opacity: 1; transform: none; transition: none; }
  .sheen { animation: none; }
}

/* ===================== TRUST BAR ===================== */
.trust-bar { background: var(--pl-ink); padding: 22px 24px; }
.trust-bar__inner { max-width: var(--container-w); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; align-items: center; }
.trust-bar__item { font: 600 12.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pl-hero-text-muted); white-space: nowrap; }

/* ===================== BREADCRUMB (podstrony) ===================== */
.breadcrumb { font-size: 13px; margin-bottom: 18px; }
.breadcrumb a { color: var(--pl-hero-micro); text-decoration: none; }
.breadcrumb__sep { color: var(--pl-text-secondary); margin: 0 6px; }
.breadcrumb__current { color: var(--pl-hero-text-muted); }

/* ===================== PROPERTIES TABLE (cornerstone) ===================== */
.props-table-wrap { overflow-x: auto; border: 1px solid var(--pl-border); border-radius: var(--radius-card); }
table.props-table { width: 100%; border-collapse: collapse; min-width: 0; }
.props-table thead tr { background: var(--pl-bg); }
.props-table th {
  text-align: left; padding: 14px 16px; font: 600 12px var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--pl-royal); border-bottom: 1px solid var(--pl-border); white-space: nowrap;
}
.props-table th.is-sortable { cursor: pointer; }
.props-table td { padding: 14px 16px; border-bottom: 1px solid var(--pl-border); font-size: 14px; color: var(--pl-text-secondary); }
.props-table td.mono-strong { font: 600 15px var(--font-mono); color: var(--pl-text); white-space: nowrap; }
.props-table td.mono { font: 500 15px var(--font-mono); color: var(--pl-text); }
.props-table tbody tr:nth-child(even) { background: var(--pl-bg); }
.props-table .count-target { display: inline; } /* JS animuje textContent liczby przy wejsciu w viewport */

.props-cards { display: none; flex-direction: column; gap: 14px; }
.prop-mobile-card { border: 1px solid var(--pl-border); border-radius: var(--radius-card); padding: 18px; background: var(--pl-bg); }
.prop-mobile-card__thickness { font: 700 18px var(--font-mono); color: var(--pl-royal); margin-bottom: 10px; }
.prop-mobile-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 13.5px; }
.prop-mobile-card__label { color: var(--pl-text-caption); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.prop-mobile-card__value { font: 600 14px var(--font-mono); color: var(--pl-text); }

@media (max-width: 1080px) {
  .props-table-wrap { display: none; }
  .props-cards { display: flex; }
}

/* Accordion (ROZ-PWL-04): <768px karty wlasciwosci sa rozwijane; 768-1080px zostaje pelna karta jak wczesniej */
.prop-mobile-card__toggle { all: unset; display: flex; width: 100%; align-items: center; justify-content: space-between; box-sizing: border-box; }
.prop-mobile-card__icon { display: none; }
@media (max-width: 767px) {
  .prop-mobile-card__toggle { cursor: pointer; }
  .prop-mobile-card__icon { display: inline-block; font: 600 16px var(--font-mono); color: var(--pl-royal); line-height: 1; }
  .prop-mobile-card__body { display: none; margin-top: 12px; }
  .prop-mobile-card.is-open .prop-mobile-card__body { display: block; }
  .prop-mobile-card.is-open .prop-mobile-card__toggle { position: sticky; top: 60px; background: var(--pl-bg); z-index: 5; padding: 4px 0; }
}

@media (max-width: 640px) {
  .decision-grid, .estimator-grid { grid-template-columns: 1fr; }
  .decision-table, table.decision-table { min-width: 0; }
  .props-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ===================== APPLICATION / GALLERY CARDS ===================== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.app-card, .gallery-card {
  background: var(--pl-white); border: 1px solid var(--pl-border); border-radius: var(--radius-card);
  overflow: hidden; position: relative; box-shadow: var(--shadow-soft); transition: box-shadow .25s, transform .25s;
}
.app-card:hover, .gallery-card:hover { box-shadow: var(--shadow-soft-hover); transform: translateY(-3px); }
.placeholder-img {
  height: 160px; border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: repeating-linear-gradient(135deg, var(--pl-bg-alt), var(--pl-bg-alt) 10px, var(--pl-border) 10px, var(--pl-border) 20px);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
}
.gallery-card .placeholder-img { height: 180px; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.placeholder-img__label { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--pl-text-caption); }
.app-card__body { padding: 20px 20px 22px; position: relative; }
.gallery-card__body { padding: 16px 18px; }
.app-card__title { font: 600 17px var(--font-display); color: var(--pl-text); margin-bottom: 8px; }
.app-card__desc { font-size: 14px; line-height: 1.5; color: var(--pl-text-secondary); margin-bottom: 14px; }
.app-card__link, .gallery-card__tag-link { font-size: 13.5px; font-weight: 600; color: var(--pl-royal); text-decoration: none; }
.gallery-card__tag { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pl-royal-light); margin-bottom: 6px; }
.gallery-card__caption { font-size: 14px; color: var(--pl-text-secondary); line-height: 1.4; }

.spectral-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--pl-spectrum); opacity: 0; transition: opacity .3s;
}
.app-card:hover .spectral-edge { opacity: 1; }

/* Gallery filters */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  padding: 9px 16px; border-radius: 20px; border: 1px solid var(--pl-border); background: var(--pl-white);
  color: var(--pl-text-secondary); font-size: 13.5px; font-weight: 500;
}
.filter-chip.is-active { border-color: var(--pl-royal); background: var(--pl-royal); color: #fff; }
.gallery-card[hidden] { display: none; }

/* ===================== LITY VS KOMOROWY: mini-tabela + quiz ===================== */
.decision-grid { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(280px, .9fr); gap: 32px; align-items: start; }
table.decision-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.decision-table thead tr { background: var(--pl-bg); }
.decision-table th { text-align: left; padding: 13px 16px; font: 600 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--pl-border); }
.decision-table th.col-lity { color: var(--pl-royal-light); }
.decision-table th.col-komorowy { color: var(--pl-text-caption); }
.decision-table td { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid var(--pl-border); }
.decision-table td.criterion { font-weight: 600; color: var(--pl-text); }
.decision-table td.komorowy-val { color: var(--pl-text-secondary); }

.quiz-box { background: var(--pl-bg); border: 1px solid var(--pl-border); border-radius: var(--radius-card); padding: 26px; }
.quiz-box__label { font: 600 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pl-royal); margin-bottom: 6px; }
.quiz-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.quiz-dot { width: 22px; height: 4px; border-radius: 2px; background: var(--pl-border); }
.quiz-dot.is-active, .quiz-dot.is-past { background: var(--pl-royal-light); }
.quiz-question { font: 600 18px var(--font-display); color: var(--pl-text); margin-bottom: 16px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  text-align: left; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--pl-border);
  background: var(--pl-white); font-size: 14.5px; color: var(--pl-text);
}
.quiz-option:hover { border-color: var(--pl-royal-light); background: var(--pl-bg-alt); }
.quiz-verdict-label { font: 600 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pl-text-caption); margin-bottom: 10px; }
.quiz-verdict-title { font: 700 24px var(--font-display); color: var(--pl-royal); margin-bottom: 10px; }
.quiz-verdict-reason { font-size: 14.5px; line-height: 1.55; color: var(--pl-text-secondary); margin: 0 0 20px; }
.quiz-step, .quiz-result { display: none; }
.quiz-step.is-active, .quiz-result.is-active { display: block; }

/* ===================== TEST UDERZENIA (impact test, /lity-vs-komorowy) ===================== */
.impact-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.impact-panel { background: #12143F; border-radius: var(--radius-card); padding: 28px; position: relative; overflow: hidden; min-height: 260px; }
.impact-panel__label { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.impact-panel__label--lity { color: var(--pl-hero-accent); }
.impact-panel__label--komorowy { color: var(--pl-text-caption); }
.impact-panel svg { width: 100%; overflow: visible; }
.impact-panel__caption { font: 600 13px var(--font-mono); margin-top: 10px; }
.impact-marker { opacity: 0; }
.impact-marker.is-dropped { opacity: 1; animation: dropMarker 1.1s cubic-bezier(.34,1.4,.64,1) both; }
.impact-marker.is-dropped.stop { animation: dropMarkerStop 1.1s cubic-bezier(.2,.9,.4,1) both; }
@keyframes dropMarker { 0%{transform:translateY(-70px);opacity:0}55%{opacity:1}70%{transform:translateY(4px)}85%{transform:translateY(-4px)}100%{transform:translateY(0)} }
@keyframes dropMarkerStop { 0%{transform:translateY(-70px);opacity:0}60%{opacity:1}100%{transform:translateY(0)} }

/* ===================== STEPS (jak dobrac / jak dzialamy) ===================== */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.step { position: relative; padding-top: 16px; border-top: 2px solid var(--pl-royal-light); }
.step__num { font: 700 22px var(--font-mono); color: var(--pl-royal-light); margin-bottom: 10px; }
.step__title { font: 600 17px var(--font-display); color: var(--pl-text); margin-bottom: 8px; }
.step__desc { font-size: 14px; line-height: 1.5; color: var(--pl-text-secondary); margin-bottom: 10px; }
.step__link { font-size: 13.5px; font-weight: 600; color: var(--pl-royal); text-decoration: none; }
.step__link--primary { color: var(--pl-coral); }
.step__link--primary:hover { text-decoration: underline; }
.step__link--secondary { color: var(--pl-text-secondary); font-weight: 500; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.step__link--secondary:hover { color: var(--pl-royal); }

/* Prostsze kroki (kontakt "jak dzialamy") bez gornej linii, z numerem mono */
.simple-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.simple-step__num { font: 700 20px var(--font-mono); color: var(--pl-royal-light); margin-bottom: 8px; }
.simple-step__title { font: 600 16px var(--font-display); color: var(--pl-text); margin-bottom: 6px; }
.simple-step__desc { font-size: 14px; line-height: 1.5; color: var(--pl-text-secondary); }

/* ===================== ESTYMATOR ===================== */
.estimator-section { background: var(--pl-navy-deep); padding: var(--section-pad-y) 24px; }
.estimator-progress-track { height: 4px; background: rgba(255,255,255,.14); border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
.estimator-progress-bar { height: 100%; background: var(--pl-coral); border-radius: 2px; transition: width .3s; }
.estimator-step-label { font: 500 12px var(--font-mono); color: var(--pl-hero-micro); margin-bottom: 28px; }
.estimator-grid { display: grid; grid-template-columns: minmax(280px, 1.15fr) minmax(240px, .85fr); gap: 28px; align-items: start; }
.estimator-panel { background: var(--pl-white); border-radius: var(--radius-card); padding: 28px 26px; min-height: 320px; }
.estimator-visual {
  background: #12143F; border: 1px solid rgba(127,160,245,.22); border-radius: var(--radius-card); padding: 22px;
  min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.estimator-visual svg { width: 100%; max-width: 220px; overflow: visible; }
.estimator-visual__label { font: 600 13px var(--font-mono); color: var(--pl-hero-accent); margin-top: 8px; }
.estimator-plate { fill: var(--pl-hero-accent); fill-opacity: .38; stroke: var(--pl-hero-accent); stroke-width: 2; transition: y .3s, height .3s; }
.estimator-hail { fill: var(--pl-coral); opacity: 0; }
.estimator-hail.is-dropped { opacity: 1; animation: dropMarker 1s cubic-bezier(.34,1.4,.64,1) both; }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.option-btn {
  text-align: center; padding: 14px 12px; border-radius: 8px; border: 1px solid var(--pl-border);
  background: var(--pl-white); color: var(--pl-text); font-size: 13.5px; font-weight: 500;
}
.option-btn.is-active { border-color: var(--pl-royal-light); background: #EEF2FC; color: var(--pl-royal); font-weight: 600; }
.option-btn--wide { flex: 1; }
.option-row { display: flex; gap: 10px; margin-bottom: 18px; }

.field-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.field-input {
  padding: 13px 14px; border-radius: 8px; border: 1px solid var(--pl-border); font-size: 15px;
  font-family: var(--font-mono); width: 160px;
}
.field-input--full { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14.5px; }
.field-input:focus, textarea.field-input--full:focus {
  outline: none; border-color: var(--pl-royal-light); background: #F8F9FC;
  box-shadow: 0 0 0 4px var(--pl-glow-royal-light);
}
.field-error { color: var(--pl-coral-hover); font-size: 13px; margin-top: 4px; }
.field-hint { background: var(--pl-bg-alt); border-radius: 8px; padding: 14px 16px; font-size: 14px; color: var(--pl-text); margin-bottom: 6px; }
.field-disclaimer { font-size: 12.5px; color: var(--pl-text-caption); margin-top: 10px; line-height: 1.5; }

.estimator-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; flex-wrap: wrap; gap: 12px; }
.estimator-buy-link { color: var(--pl-hero-text-muted); font-size: 13.5px; text-decoration: underline; }
.btn--ghost-dark { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 13px 22px; border-radius: 6px; font-size: 14px; }

.estimator-result { background: var(--pl-white); border-radius: var(--radius-card); padding: 40px 32px; text-align: center; max-width: 520px; margin: 0 auto; }
.estimator-result__icon { width: 52px; height: 52px; border-radius: 50%; background: #EAF6EF; color: #1E8A4C; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 24px; }
.estimator-result__title { font: 700 20px var(--font-display); color: var(--pl-text); margin-bottom: 10px; }
.estimator-result__desc { font-size: 14.5px; color: var(--pl-text-secondary); line-height: 1.55; margin: 0 0 20px; }

.estimator-step { display: none; }
.estimator-step.is-active { display: block; }
.estimator-view { display: none; }
.estimator-view.is-active { display: block; }

/* ===================== FAQ (accordion) ===================== */
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item { border-bottom: 1px solid var(--pl-border); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; padding: 18px 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-question__text { font: 600 16px var(--font-display); color: var(--pl-text); }
.faq-question__icon { font: 600 18px var(--font-mono); color: var(--pl-royal-light); flex: none; }
.faq-answer { margin: 0 4px 20px; font-size: 14.5px; line-height: 1.6; color: var(--pl-text-secondary); max-width: 700px; display: none; }
.faq-item.is-open .faq-answer { display: block; }

/* ===================== CTA band ===================== */
.cta-band { background: var(--pl-navy-deep); padding: 80px 24px; text-align: center; }
.cta-band__title { font: 700 clamp(24px,3.6vw,34px)/1.25 var(--font-display); color: #fff; margin: 0 0 26px; }

/* ===================== FOOTER ===================== */
.site-footer { background: var(--pl-ink); padding: 56px 24px 32px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.footer-brand { max-width: 320px; }
.footer-brand__logo { display: flex; align-items: baseline; gap: 1px; margin-bottom: 14px; }
.footer-brand__desc { font-size: 13.5px; line-height: 1.6; color: var(--pl-hero-micro); margin: 0; }
.footer-col__title { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #5C6795; margin-bottom: 14px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: 14px; color: var(--pl-hero-text-muted); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; font-size: 12.5px; color: #5C6795; }

/* ===================== O NAS: warstwy laminatu ===================== */
.layers-list { max-width: 760px; margin: 0 auto; }
.layer-row {
  display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--pl-border);
  opacity: 0; transform: translateX(-18px); transition: opacity .5s, transform .5s;
}
.layer-row.is-in { opacity: 1; transform: none; }
.layer-row:last-of-type { border-bottom: none; }
.layer-row__bar { width: 6px; align-self: stretch; border-radius: 3px; flex: none; min-height: 70px; }
.layer-row__eyebrow { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pl-royal-light); margin-bottom: 6px; }
.layer-row__title { font: 600 18px var(--font-display); color: var(--pl-text); margin-bottom: 6px; }
.layer-row__desc { font-size: 14.5px; line-height: 1.55; color: var(--pl-text-secondary); max-width: 560px; }
.layers-final-edge { height: 3px; margin-top: 8px; border-radius: 2px; background: var(--pl-spectrum); opacity: 0; transition: opacity .6s; }
.layers-final-edge.is-in { opacity: 1; }

.proof-grid { max-width: var(--container-w-narrow); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; text-align: center; }
.proof-value { font: 700 34px var(--font-mono); color: var(--pl-royal); margin-bottom: 6px; }
.proof-label { font-size: 13.5px; color: var(--pl-text-secondary); }

/* ===================== SMUGA SWIATLA (silosy: /wlasciwosci itd.) ===================== */
.article-with-toc { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 48px; align-items: start; }
.article-ray-wrap { position: relative; padding-left: 24px; }
.article-ray-track { position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--pl-border); border-radius: 2px; }
.article-ray-fill { position: absolute; left: 0; top: 0; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--pl-royal-light), var(--pl-royal)); height: 0%; transition: height .1s linear; }
.article-section { margin-bottom: 40px; }
.article-section h2 { font: 600 21px var(--font-display); margin: 0 0 10px; color: var(--pl-text); transition: color .3s; }
.article-section.is-active h2 { color: var(--pl-royal); }
.article-section p { font-size: 15.5px; line-height: 1.7; color: var(--pl-text-secondary); max-width: 680px; }

.toc { position: sticky; top: 90px; }
.toc__label { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pl-text-caption); margin-bottom: 12px; }
.toc__list { display: flex; flex-direction: column; gap: 10px; }
.toc__item { font-size: 13px; line-height: 1.4; color: var(--pl-text-caption); transition: color .3s; }
.toc__item.is-active { color: var(--pl-royal); font-weight: 600; }
@media (max-width: 1080px) { .article-with-toc { grid-template-columns: 1fr; } .toc { display: none; } }

/* Linia podwojna ("plyta oslania tresc") — /oslony-bezpieczenstwo/, patrz plan 2.3.
   Druga linia jest statyczna (dekoracyjna) — glowna linia (.article-ray-fill) pozostaje
   jedynym elementem napedzanym scrollem, zgodnie z zasada "1 element + translateY w rAF". */
.article-ray-wrap--double { padding-left: 28px; }
.article-ray-wrap--double::before {
  content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 3px;
  background: linear-gradient(180deg, var(--pl-royal-light), var(--pl-border)); border-radius: 2px; opacity: .5;
}

/* ===================== KONTAKT: temat-select + topic buttons ===================== */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.topic-btn { padding: 11px 10px; border-radius: 8px; border: 1px solid var(--pl-border); background: var(--pl-white); color: var(--pl-text); font-size: 13px; font-weight: 500; }
.topic-btn.is-active { border-color: var(--pl-royal-light); background: #EEF2FC; color: var(--pl-royal); font-weight: 600; }
.contact-form-fields { display: flex; flex-direction: column; gap: 16px; }
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--pl-text-caption); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.rodo-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--pl-text-secondary); }
.rodo-check input { margin-top: 2px; width: 16px; height: 16px; flex: none; }


/* OPS-030: mobile decision grid must not widen the document. */
@media (max-width: 640px) {
  .decision-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .decision-grid > * { min-width: 0; }
  .decision-grid .props-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .quiz-box { box-sizing: border-box; }
}


/* OPS-030: estimator follows the mobile one-column layout. */
@media (max-width: 640px) {
  .estimator-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .estimator-grid > * { min-width: 0; }
}

/* ------------------------------------------------------------------------
 * Data-card mono (ROZ-PWL-03) — kompaktowa karta dla pojedynczego parametru
 * technicznego (ikona + etykieta + wartosc + jednostka + norma).
 * Reuzywalny wzorzec: pl24_render_data_cards() w functions.php.
 * ---------------------------------------------------------------------- */
.data-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 20px 0 28px;
}
.data-card {
  border: 1px solid var(--pl-border); border-radius: var(--radius-card);
  background: var(--pl-white); padding: 16px 14px;
}
.data-card__icon { color: var(--pl-royal-light); margin-bottom: 8px; line-height: 0; }
.data-card__icon svg { width: 20px; height: 20px; display: block; }
.data-card__label {
  font: 600 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--pl-text-caption); margin-bottom: 6px;
}
.data-card__value { font: 700 20px var(--font-mono); color: var(--pl-text); }
.data-card__unit { font: 500 12px var(--font-body); color: var(--pl-text-secondary); margin-left: 3px; }
.data-card__norm { font: 500 10.5px var(--font-mono); color: var(--pl-text-caption); margin-top: 4px; }

@media (max-width: 768px) { .plx-topbar { display: none !important; } }

/* COMPLIANZ GDPR SAFE STYLING */
.cmplz-hidden {
  display: none !important;
}
#cmplz-cookiebanner-container .cmplz-close svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}
#cmplz-cookiebanner-container {
  z-index: 999999 !important;
}