/* ============================================
   MODELE WSPÓŁPRACY - style specyficzne dla /modele-wspolpracy
   Reużywa tokens.css, base.css, components.css
   ============================================ */

/* Sekcje docelowe anchorów - margines, żeby nie chowały się pod sticky nagłówkiem */
#porownanie, #model-karty, #model-obnizenie, #model-automat, #kalkulator-porownanie, #rekomendacja, #cta-final {
  scroll-margin-top: 140px;
}

/* ============================================
   HERO (ciemny)
   ============================================ */
.page-hero { background: var(--dark); color: #fff; padding: 48px 0 64px; }
.page-hero-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.breadcrumb { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 24px; }
.breadcrumb a { color: rgba(255,255,255,0.55); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb strong { color: rgba(255,255,255,0.9); font-weight: 500; }
.breadcrumb span { margin: 0 6px; }
.page-hero h1 { color: #fff; margin-bottom: 20px; }
.page-hero-desc { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 520px; margin-bottom: 32px; }
.page-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.page-hero-media .media-placeholder {
  aspect-ratio: 4/3; border-radius: var(--radius-media);
  background: repeating-linear-gradient(135deg, #4a4a49 0, #4a4a49 10px, #444443 10px, #444443 20px);
}
.page-hero-media .media-placeholder-label { color: rgba(255,255,255,0.4); }
.page-hero-media .media-placeholder-icon { color: rgba(255,255,255,0.35); }

@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .page-hero-media .media-placeholder { min-height: 220px; }
}

@media (max-width: 600px) {
  .breadcrumb { display: none; }
  .page-hero-content { text-align: center; }
  .page-hero-desc { margin-left: auto; margin-right: auto; }
  .page-hero-actions { flex-direction: column; align-items: stretch; }
  .page-hero-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================
   FOTO PEŁNOEKRANOWE
   ============================================ */
.fullwidth-media { background: var(--surface); }
/* proporcja 4.8/1 dawała bardzo płaski pasek, na którym nie było widać zdjęcia
   - niższy współczynnik + max-height, żeby na szerokich ekranach nie urosło za bardzo */
.fullwidth-media .media-placeholder { width: 100%; aspect-ratio: 3/1; min-height: 320px; max-height: 520px; }
.fullwidth-media .media-placeholder::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); pointer-events: none;
}
@media (max-width: 900px) { .fullwidth-media .media-placeholder { aspect-ratio: 2/1; min-height: 240px; } }
@media (max-width: 600px) { .fullwidth-media .media-placeholder { aspect-ratio: 3/2; min-height: 220px; } }

/* ============================================
   SEKCJE MODELI
   ============================================ */
.model-section { background: var(--white); }
.model-section-alt { background: var(--surface); }

#model-karty, #model-obnizenie, #model-automat { position: relative; }

.model-head { margin-bottom: 40px; }
.model-head-top { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.model-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px;
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.model-icon svg { width: 26px; height: 26px; stroke-width: 2; }
.model-head-top .section-label { margin-bottom: 4px; }
.model-head-top h2 { margin: 0; }
.model-subtitle { font-family: var(--font-head); font-size: 20px; font-weight: 500; color: var(--dark); margin-bottom: 12px; }
.model-lead { font-size: 17px; line-height: 1.7; color: var(--text-muted); max-width: 900px; }

/* ============================================
   PANEL 3-KOLUMNOWY (Jak działa / Korzyści / Kiedy warto)
   ============================================ */
.model-panel {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm);
}
.model-panel-col { display: flex; flex-direction: column; }
.model-panel-col + .model-panel-col .model-panel-body { border-left: 1px solid var(--border-light); }
.model-panel-col + .model-panel-col .model-panel-head { box-shadow: inset 1px 0 rgba(255,255,255,0.12); }
.model-panel-head {
  background: var(--dark); color: #fff;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 16px 24px;
}
.model-panel-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 20px; }

.mp-step { display: flex; gap: 14px; align-items: flex-start; }
.mp-num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.mp-step-text strong { display: block; font-size: 15px; color: var(--dark); margin-bottom: 4px; }
.mp-step-text span { font-size: 14px; color: var(--text-muted); line-height: 1.55; }

.mp-check { display: flex; gap: 12px; align-items: flex-start; }
.mp-check .check-icon { width: 18px; height: 18px; color: var(--red); margin-top: 2px; background: none; border-radius: 0; }
.mp-check .check-icon svg { width: 100%; height: 100%; stroke: var(--red); stroke-width: 2.5; }
.mp-check-text strong { display: block; font-size: 15px; color: var(--dark); margin-bottom: 4px; }
.mp-check-text span { font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.mp-check-plain { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 768px) {
  .model-panel { grid-template-columns: 1fr; }
  .model-panel-col + .model-panel-col .model-panel-body { border-left: none; }
  .model-panel-col + .model-panel-col { border-top: 1px solid var(--border); }
}

/* ============================================
   CALLOUT - Ulga ZUS
   ============================================ */
.callout-zus {
  background: var(--red-tint); border-left: 4px solid var(--red);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 28px 32px; margin-top: 32px;
}
.callout-zus h3 { font-size: 18px; color: var(--dark); margin-bottom: 10px; }
.callout-zus p { font-size: 16px; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; max-width: 900px; }

/* ============================================
   CALLOUT - Na co uważać (ostrzeżenie)
   ============================================ */
.callout-warn {
  background: #FFFBEB; border-left: 4px solid #E0A100;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 28px 32px; margin-top: 32px;
}
.callout-warn h3 { font-size: 18px; color: var(--dark); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.callout-warn h3 svg { width: 20px; height: 20px; color: #B8860B; stroke-width: 2; }
.callout-warn p { font-size: 16px; color: var(--text-muted); line-height: 1.65; max-width: 900px; }

/* ============================================
   PRZYKŁAD (model 2)
   ============================================ */
.example-card {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: 28px 32px; margin-top: 32px;
}
.example-card-text { max-width: 600px; }
.example-card-text p { font-size: 16px; color: var(--text-muted); line-height: 1.6; }
.example-card-text strong { color: var(--dark); }
.example-card-prices { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.price-chip {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  border-radius: var(--radius-card); padding: 14px 22px; min-width: 120px; text-align: center;
}
.price-chip-label { font-size: 12px; color: var(--text-light); }
.price-chip-value { font-family: var(--font-head); font-size: 26px; font-weight: 600; }
.price-chip-old { border: 1px solid var(--border); background: var(--surface); }
.price-chip-old .price-chip-value { color: var(--text-light); text-decoration: line-through; }
.price-chip-new { border: 1px solid var(--red); background: var(--red-tint); }
.price-chip-new .price-chip-value { color: var(--red); }
.price-arrow { font-size: 22px; color: var(--text-light); }

@media (max-width: 768px) {
  .example-card { flex-direction: column; align-items: stretch; gap: 24px; }
  .example-card-prices { justify-content: center; }
}

/* ============================================
   ILE KOSZTUJE INWESTYCJA
   ============================================ */
.invest-card {
  display: grid; grid-template-columns: 0.5fr 1fr; gap: 40px;
  background: var(--white); border-left: 4px solid var(--red);
  border-radius: 0 var(--radius-card) var(--radius-card) 0; box-shadow: var(--shadow-sm);
  padding: 36px 40px; margin-top: 32px;
}
.invest-card-left h3 { font-size: 26px; color: var(--dark); }
.invest-price { font-size: 18px; color: var(--text-muted); margin-bottom: 16px; }
.invest-price strong:first-child { font-family: var(--font-head); font-size: 34px; font-weight: 600; color: var(--red); }
.invest-price strong { color: var(--dark); }
.invest-card-right p { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; }
.invest-card-right .btn { margin-top: 8px; }

@media (max-width: 768px) {
  .invest-card { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================
   SZYBKA REKOMENDACJA
   ============================================ */
.rec-card {
  background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--red);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; margin-top: 40px;
}
.rec-card-head {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-size: 20px; font-weight: 500; color: var(--dark);
  padding: 24px 32px; border-bottom: 1px solid var(--border-light);
}
.rec-card-head svg { width: 24px; height: 24px; color: var(--red); stroke-width: 2; }
.rec-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 32px; border-bottom: 1px solid var(--border-light);
}
.rec-situation { font-size: 16px; color: var(--dark); }
.rec-answer { font-size: 16px; font-weight: 600; color: var(--red); text-align: right; }
.rec-note { padding: 24px 32px; font-size: 14px; color: var(--text-muted); line-height: 1.6; background: var(--surface); }
.rec-note strong { color: var(--dark); }

@media (max-width: 640px) {
  .rec-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rec-answer { text-align: left; }
}

/* ============================================
   MOBILE - wyśrodkowanie nagłówków sekcji (spójnie z homepage)
   ============================================ */
@media (max-width: 600px) {
  .model-head, .model-head-top { text-align: center; }
  .model-head-top { flex-direction: column; gap: 12px; }
  .model-icon { margin: 0 auto; }
  .rec-card-head { justify-content: center; text-align: center; }

  /* Krótkie kafle informacyjne: globalna reguła środkowała w nich sam
     nagłówek (h1-h3), a tekst pod spodem zostawał przy lewej krawędzi.
     Środkujemy cały kafel, żeby był spójny wewnętrznie. */
  .callout-zus,
  .callout-warn,
  .example-card-text,
  .invest-card-left,
  .invest-card-right { text-align: center; }
  .callout-zus .arrow-link,
  .invest-card-right .btn { margin-left: auto; margin-right: auto; }
  .invest-card-right .btn { display: flex; width: fit-content; }
}