/* =====================================
   SecondRing City Pages — Cool v3
   - Image sizing per request
   - Back button styling
   ===================================== */
:root{
  --sr-primary:#4851B1;
  --sr-accent:#00C2A8;
  --sr-dark:#0b1020;
  --sr-radius:16px;
  --sr-shadow:0 10px 30px rgba(0,0,0,.08);
}
.sr-wrap{ width:min(1100px,92vw); margin-inline:auto; padding:28px 0 34px; color:var(--sr-dark) }

/* Back button */
.sr-wrap .sr-back{ margin:0 0 10px }
.sr-wrap .sr-back .back{
  display:inline-flex; align-items:center; gap:.35rem; padding:10px 14px; border-radius:12px;
  font-weight:800; background:#fff; color:var(--sr-primary); border:1px solid var(--sr-primary);
  -webkit-text-fill-color: var(--sr-primary) !important; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.sr-wrap .sr-back .back:hover{ background:#f8f9ff; text-decoration:none }

/* Headline card */
.sr-wrap .sr-hero{
  display:block;
  background:linear-gradient(135deg, var(--sr-primary), var(--sr-accent));
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  padding:22px; border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.16); margin:0 0 14px;
}

/* Lede + buttons */
.sr-wrap .sr-lede{ font-size:1.05rem; line-height:1.7; margin:12px 0 6px; padding:14px 16px; background:#fff; border:1px solid #e8eaf5; border-radius:14px; box-shadow:var(--sr-shadow) }
.sr-wrap .cta-buttons{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:14px }
.sr-wrap .cta-buttons .button{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:14px; font-weight:800; background:linear-gradient(135deg, var(--sr-primary), color-mix(in srgb, var(--sr-accent) 80%, white 20%)); color:#fff; border:0; box-shadow:0 14px 28px rgba(72,81,177,.25); -webkit-text-fill-color: currentColor !important; transition:transform .08s ease, filter .18s ease }
.sr-wrap .cta-buttons .button:hover{ filter:brightness(1.07); transform:translateY(-1px); text-decoration:none }
.sr-wrap .cta-buttons .button.secondary{ background:#fff !important; color:var(--sr-primary) !important; -webkit-text-fill-color: var(--sr-primary) !important; border:2px solid color-mix(in srgb, var(--sr-primary) 70%, white 30%) !important; box-shadow:0 10px 24px rgba(0,0,0,.10) }

/* Separator */
.sr-wrap .wp-block-separator{ border:0; height:1px; margin:20px 0; background:linear-gradient(90deg, rgba(0,0,0,0), rgba(72,81,177,.35), rgba(0,0,0,0)) }

/* Features: grid */
.sr-wrap .sr-features{
  list-style:none; padding:0; margin:10px 0 16px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
}
@media (max-width:900px){ .sr-wrap .sr-features{ grid-template-columns:1fr } }
.sr-wrap .sr-features li{
  display:block; position:relative; padding:10px 12px 10px 36px;
  background:linear-gradient(180deg,#fff,#fbfbff); border:1px solid #e9ecfb; border-radius:12px; box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.sr-wrap .sr-features li::before{
  content:"✓"; position:absolute; left:12px; top:10px; font-weight:900; color:#00A991;
}

/* Inline image styling — per request */
.sr-wrap .sr-inline-img{ margin:10px 0 18px; text-align:center }
.sr-wrap .sr-inline-img img{
  display:block; margin-inline:auto;
  max-width:220px; width:100%; height:auto;
  border-radius:14px;
  border:1px solid #e9ecfb;
  box-shadow:0 14px 36px rgba(0,0,0,.10);
}

/* FAQ cards */
.sr-wrap .sr-faq details{ border:1px solid #e6e8f2; border-radius:14px; padding:12px 14px; margin:12px 0; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.06) }
.sr-wrap .sr-faq details[open]{ background:#f8f9ff; border-color:#dfe3fb }
.sr-wrap .sr-faq summary{ cursor:pointer; font-weight:800 }
.sr-wrap .sr-faq summary::-webkit-details-marker{ display:none }
.sr-wrap .sr-faq summary::before{ content:"▸"; display:inline-block; margin-right:8px; color:var(--sr-primary) }
.sr-wrap .sr-faq details[open] > summary::before{ content:"▾" }
.sr-wrap .sr-faq details > div{ margin-top:8px; color:#4b5563 }

/* Focus */
.sr-wrap a:focus-visible, .sr-wrap button:focus-visible, .sr-wrap summary:focus-visible{
  outline:3px solid color-mix(in srgb, var(--sr-accent) 60%, white 40%); outline-offset:2px;
}

/* Chrome text-fill safety */
.sr-wrap a.button,.sr-wrap .button,.sr-wrap .wp-block-button__link{ -webkit-text-fill-color: currentColor !important }
.sr-wrap a.button.secondary,.sr-wrap .button.secondary{ color:#4851B1 !important; -webkit-text-fill-color:#4851B1 !important; background:#ffffff !important; border:1px solid #4851B1 !important }