/* ============================================================
   Homepage styles
   ============================================================ */

/* ---- Hero ---- */
.hero { position: relative; background: var(--brand-800); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background:
  radial-gradient(1200px 600px at 85% -10%, rgba(42,165,114,.45), transparent 60%),
  radial-gradient(900px 500px at -5% 110%, rgba(11,90,59,.6), transparent 55%),
  linear-gradient(125deg, #0a4730 0%, #0b5a3b 55%, #0e6f49 100%); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0); background-size: 26px 26px; }
.contrast-high .hero { background: var(--brand-800); }
.contrast-high .hero__bg { background: var(--brand-800); }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 60px); align-items: center; padding-block: clamp(46px, 6vw, 84px); }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: .92rem; padding: 7px 16px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(214,165,68,.5); color: #fbf0d6; margin-bottom: 22px; }
.hero__title { font-size: clamp(2.1rem, 4.8vw, 3.5rem); line-height: 1.18; color: #fff; letter-spacing: -.01em; }
.hero__hl { color: var(--gold-500); }
.hero__lead { margin-top: 20px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.7; color: #d7ece1; max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__emergency { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 12px 20px; border-radius: var(--r-pill); background: rgba(194,59,50,.18); border: 1px solid rgba(255,255,255,.18); font-size: .98rem; }
.hero__emergency strong { font-family: var(--font-head); font-size: 1.2rem; color: #fff; }
.hero__emergency-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--emergency); }

.hero__media { position: relative; }
.hero__photo { width: 100%; aspect-ratio: 4/3.4; box-shadow: var(--shadow-lg); border: 4px solid rgba(255,255,255,.16); }
.hero__media-badge { position: absolute; left: -18px; bottom: 28px; display: flex; align-items: center; gap: 13px; background: #fff; color: var(--ink-900); padding: 14px 20px 14px 14px; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.hero__media-badge-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-600); }
.hero__media-badge-num { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--brand-700); line-height: 1; }
.hero__media-badge-lbl { font-size: .82rem; color: var(--ink-500); margin-top: 3px; }

/* ---- Quick access ---- */
.quick-access { margin-top: -34px; position: relative; z-index: 3; padding-bottom: 8px; }
.quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.quick-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); text-align: right; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; position: relative; }
.quick-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-300); }
.quick-tile__ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-600); }
.quick-tile:hover .quick-tile__ic { background: var(--brand-700); color: #fff; }
.quick-tile__label { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink-900); line-height: 1.35; }
.quick-tile__arrow { position: absolute; top: 18px; left: 18px; color: var(--ink-300); transition: transform .15s ease, color .15s ease; }
.quick-tile:hover .quick-tile__arrow { color: var(--brand-600); transform: translateX(-3px); }

/* ---- Services ---- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px; text-align: right; background: var(--surface); }
.svc-card__ic { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-600); }
.svc-card:hover .svc-card__ic { background: var(--brand-700); color: #fff; }
.svc-card__body { flex: 1; min-width: 0; }
.svc-card__head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.svc-card__head .chip { flex: none; margin-top: 2px; }
.svc-card__title { font-size: 1.16rem; color: var(--ink-900); flex: 1 1 auto; min-width: 0; }
.svc-card__desc { margin-top: 7px; font-size: .96rem; line-height: 1.55; }
.svc-card__arrow { color: var(--ink-300); flex: none; align-self: center; transition: transform .15s ease, color .15s ease; }
.svc-card:hover .svc-card__arrow { color: var(--brand-600); transform: translateX(-3px); }

/* ---- News ---- */
.news-section { background: var(--surface-2); }
.news-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.news-feat { display: flex; flex-direction: column; overflow: hidden; text-align: right; padding: 0; }
.news-feat__img { width: 100%; aspect-ratio: 16/8.5; --is-bg: var(--brand-100); border-radius: 0; }
.news-feat__body { padding: 24px; }
.news-feat__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.news-date { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink-500); font-family: var(--font-head); }
.news-feat__title { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.32; color: var(--ink-900); }
.news-feat__excerpt { margin-top: 12px; font-size: 1rem; line-height: 1.65; }
.news-feat__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-family: var(--font-head); font-weight: 600; color: var(--brand-700); }
.news-feat:hover .news-feat__more { gap: 11px; }

.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); text-align: right; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.news-row:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateX(-3px); }
.news-row__date { flex: none; width: 58px; height: 58px; display: grid; place-content: center; text-align: center; background: var(--brand-50); border-radius: var(--r-md); color: var(--brand-700); }
.news-row__day { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; line-height: 1; }
.news-row__mon { font-size: .74rem; font-family: var(--font-head); }
.news-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.news-row__chip { align-self: flex-end; }
.news-row__title { font-family: var(--font-head); font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-row__arrow { flex: none; color: var(--ink-300); }
.news-row:hover .news-row__arrow { color: var(--brand-600); }

/* ---- Alerts ---- */
.alerts-section { padding-top: clamp(36px, 4vw, 56px); padding-bottom: 0; }
.alerts-card { background: linear-gradient(135deg, #fff, var(--surface-2)); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: clamp(22px, 3vw, 34px); }
.alerts-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.alerts-head__ic { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--warn-100); color: var(--warn-600); }
.alerts-head__title { font-size: 1.4rem; }
.alerts-head__sub { margin-top: 3px; font-size: .95rem; }
.alerts-head__btn { margin-right: auto; }
.alerts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.alert-tile { padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; border-top: 4px solid var(--line); }
.alert-tile--warn { border-top-color: var(--warn-600); }
.alert-tile--info { border-top-color: var(--info-600); }
.alert-tile--brand { border-top-color: var(--brand-500); }
.alert-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alert-tile__title { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--ink-900); }
.alert-tile__num { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; color: var(--ink-900); margin-top: 8px; line-height: 1; }
.alert-tile__unit { font-size: 1rem; font-weight: 500; color: var(--ink-500); }
.alert-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: .85rem; font-family: var(--font-head); }
.alert-tile__trend { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-700); font-weight: 600; }

/* ---- Network preview ---- */
.network-preview__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.network-preview__list { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 28px; }
.network-preview__list li { display: flex; align-items: center; gap: 11px; font-size: 1.04rem; color: var(--ink-700); }
.network-preview__list .icon { color: var(--brand-600); flex: none; }
.network-preview__map { padding: 0; overflow: hidden; border: 1px solid var(--line); cursor: pointer; }

.minimap { position: relative; aspect-ratio: 16/11; background: linear-gradient(160deg, #eef7f2, #e0f0e8); }
.minimap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.minimap__pin { position: absolute; transform: translate(50%, -50%); width: 30px; height: 30px; display: grid; place-items: center; background: var(--brand-600); color: #fff; border-radius: 50% 50% 50% 0; rotate: 45deg; box-shadow: var(--shadow-md); border: 2px solid #fff; }
.minimap__pin .icon { rotate: -45deg; }
.minimap__pin.is-hq { background: var(--emergency); width: 38px; height: 38px; z-index: 2; }
.minimap__hint { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: rgba(255,255,255,.94); border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--brand-700); box-shadow: var(--shadow-sm); }

/* ---- Stats band ---- */
.stats-band { background: var(--brand-700); color: #fff; position: relative; overflow: hidden; }
.stats-band::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0); background-size: 24px 24px; }
.contrast-high .stats-band { background: var(--brand-800); }
.stats-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: clamp(38px, 4vw, 56px); }
.stat { text-align: center; padding: 0 12px; position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: rgba(255,255,255,.18); }
.stat__value { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--gold-500); line-height: 1; }
.stat__label { margin-top: 10px; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.stat__sub { margin-top: 4px; font-size: .86rem; color: #bcd6c9; }

/* ---- Events ---- */
.event-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.event-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-top: 4px solid var(--brand-500); }
.event-card--info { border-top-color: var(--info-600); }
.event-card--gold { border-top-color: var(--gold-500); }
.event-card--warn { border-top-color: var(--warn-600); }
.event-card__date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-700); }
.event-card__day { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.event-card__mon { font-size: .72rem; font-family: var(--font-head); }
.event-card__title { font-size: 1.04rem; line-height: 1.4; color: var(--ink-900); }
.event-card__meta { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: .88rem; color: var(--ink-500); }
.event-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.event-card__meta .icon { color: var(--brand-500); flex: none; }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { max-width: 520px; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
  .news-layout { grid-template-columns: 1fr; }
  .network-preview__inner { grid-template-columns: 1fr; }
  .alerts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .stat:nth-child(2)::after { display: none; }
  .event-grid { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .hero__media-badge { left: 50%; transform: translateX(-50%); }
}