/* Общие блоки гайдов (/rayony-batumi/, /bezopasnaya-pokupka/).
   Подключается после home-v2.css: токены, шапка, футер, .btn, .tag, .head, .band берутся оттуда.
   Здесь то, что у гайдов одинаковое: hero, ряд карточек, таблица, «Что читать дальше», CTA.
   Специфичное для страницы лежит в rayony.css и bezopasnaya.css. */

/* Hero */
.gd-hero{padding-top:20px}
.gd-hero-panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);min-height:560px;border-radius:var(--r-xl);color:#fff;background:linear-gradient(118deg,#2f7190 0%,#245b76 38%,#163e54 100%);overflow:hidden}
.gd-hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:72px 40px 64px 64px}
.gd-hero-copy .tag{margin-bottom:28px}
.gd-hero h1{font-size:clamp(32px,4.4vw,58px);font-weight:500;letter-spacing:-.025em;line-height:1.04;text-transform:uppercase}
.gd-hero-lead{margin-top:26px;max-width:500px;color:#d5e8f1;font-size:18px;line-height:1.55}
.gd-hero-photo{position:relative;min-width:0;margin:16px;border-radius:var(--r-l);background:var(--ice);overflow:hidden}
.gd-hero-photo img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:96%;width:auto;max-width:none}
.gd-rule{margin-top:20px;padding:28px 32px;border-radius:var(--r-l);background:var(--soft);font-size:17px;line-height:1.6}
.gd-rule strong{color:var(--blue);font-weight:600}

/* Ряд из четырёх карточек */
.gd-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gd-card{padding:28px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff}
.gd-card h3{font-size:19px}
.gd-card p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.6}

/* Таблица: на узком экране строки становятся карточками */
.gd-table-wrap{padding:10px 32px;border-radius:var(--r-l);background:#fff;overflow-x:auto}
.gd-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.gd-table th{padding:20px 20px 14px 0;color:var(--muted);font-size:13px;font-weight:500;text-align:left}
.gd-table td{padding:20px 20px 20px 0;border-top:1px solid var(--line);vertical-align:top}
.gd-table th:last-child,.gd-table td:last-child{padding-right:0}
.gd-table td:first-child{font-weight:600}

/* Что читать дальше */
.gd-rel-head .lead{margin-top:20px}
.gd-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(28px,3.6vw,48px)}
.gd-rel-card{display:flex;flex-direction:column;align-items:flex-start;min-height:230px;padding:30px;border-radius:var(--r-l);background:var(--soft);transition:background .25s}
.gd-rel-card:hover{background:var(--ice)}
.gd-rel-card p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.6}
.gd-rel-card .more{margin-top:auto;padding-top:24px}

/* CTA */
#cta{padding-top:0}
.gd-cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);border-radius:var(--r-xl);background:linear-gradient(118deg,#2f7190 0%,#245b76 40%,#163e54 100%);color:#fff;overflow:hidden}
.gd-cta-copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,5vw,72px)}
.gd-cta-copy .tag{margin-bottom:24px}
.gd-cta-copy>p{margin-top:22px;max-width:560px;color:#d5e8f1;font-size:17px;line-height:1.6}
.gd-cta-copy .btn{margin-top:34px}
.gd-cta-copy>.gd-cta-note{max-width:480px;color:var(--on-dark);font-size:14px}
.gd-cta-note strong{color:#fff;font-weight:600}
.gd-cta-photo{position:relative;min-width:0;min-height:440px;margin:16px;border-radius:var(--r-l);background:var(--ice);overflow:hidden}
.gd-cta-photo img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:96%;width:auto;max-width:none}
.gd-disclaimer{padding-bottom:8px;color:var(--muted);font-size:13px;line-height:1.6}
.gd-disclaimer em{font-style:normal}

@media(max-width:1100px){
  .gd-hero-panel{min-height:0}
  .gd-hero-copy{padding:52px 24px 52px 40px}
  .gd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .gd-rel{grid-template-columns:1fr}
  .gd-rel-card{min-height:0}
}
@media(max-width:720px){
  .gd-hero-panel{grid-template-columns:1fr}
  .gd-hero-copy{padding:40px 24px 28px}
  .gd-hero-lead{max-width:none}
  .gd-hero-photo{height:340px;margin:0 12px 12px}
  .gd-rule{padding:22px 24px;font-size:16px}
  .gd-cards{grid-template-columns:1fr;gap:12px}
  .gd-table-wrap{padding:0;background:transparent;overflow:visible}
  .gd-table,.gd-table tbody,.gd-table tr,.gd-table td{display:block}
  .gd-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gd-table tr{padding:22px 24px;border-radius:var(--r-l);background:#fff}
  .gd-table tr+tr{margin-top:12px}
  .gd-table td{padding:0;border:0}
  .gd-table td+td{margin-top:14px}
  .gd-table td::before{content:attr(data-label);display:block;margin-bottom:3px;color:var(--muted);font-size:12.5px;font-weight:500}
  .gd-table td:first-child{font-size:18px;line-height:1.3}
  .gd-cta{grid-template-columns:1fr}
  .gd-cta-photo{min-height:0;height:340px;margin:0 12px 12px}
}
@media(max-width:560px){
  .gd-hero h1{font-size:24px}
  .gd-hero-lead{font-size:16.5px}
  .gd-cta-copy .btn{width:100%}
}