/* ============================================================
   pages-od.css — reference-style inner-page hero (.op-*).
   Body sections reuse the home .od-* component library
   (home-od.css) + the .od-deco infographics (home-deco.css).
   ============================================================ */
.op-hero {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: clamp(320px, 46vh, 460px);
	display: flex; align-items: center;
	background: var(--dm-indigo) center / cover no-repeat;
	color: #fff;
}
.op-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(120deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.82) 55%, rgba(0, 0, 0, 0.68));
}
.op-hero--slim { min-height: clamp(240px, 34vh, 340px); }
.op-hero__wrap { position: relative; z-index: 1; width: 100%; text-align: center; padding: clamp(40px,7vw,80px) 0; }
.op-hero--slim .op-hero__wrap { padding: clamp(30px,5vw,54px) 0; }
.op-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px;
	padding: 7px 16px; border-radius: 999px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
	font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.op-hero h1 {
	font-family: var(--dm-font-display); font-weight: 700;
	font-size: clamp(32px, 5vw, 56px); line-height: 1.06; letter-spacing: -.02em;
	margin: 0 auto 16px; max-width: 18ch; color: #fff;
}
.op-hero h1 em { color: var(--dm-sage); font-style: normal; }
.op-hero p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.86); margin: 0 auto; max-width: 62ch; }
.op-crumb {
	display: inline-flex; gap: 8px; align-items: center; margin-top: 20px;
	font-size: 13.5px; color: rgba(255,255,255,.8);
}
.op-crumb a { color: #fff; text-decoration: none; opacity: .9; }
.op-crumb a:hover { opacity: 1; text-decoration: underline; }
.op-crumb i { font-size: 10px; opacity: .7; }

/* step number badge for the numbered "how it works" cards */
.od-serv__num {
	position: absolute; top: 22px; right: 24px; z-index: 1;
	font-family: var(--dm-font-display); font-weight: 700; font-size: 40px;
	color: var(--dm-terracotta); opacity: .18; line-height: 1;
}

/* contact method rows */
.op-cinfo { display: grid; gap: 10px; margin-top: 14px; }
.op-cinfo a, .op-cinfo span { display: inline-flex; align-items: center; gap: 10px; color: var(--dm-ink); text-decoration: none; font-weight: 500; }
.op-cinfo a:hover { color: var(--dm-terracotta); }
.op-cinfo i { color: var(--dm-terracotta); width: 18px; text-align: center; }

/* ============================================================
   PER-THEME HERO IMAGES + SECTION RESHAPING
   pages-od.css — theme engine extension (Phase 2)
   All images must exist as /custom/images/<KEY>-<type>.jpg
   No hardcoded hex — only var(--dm-*) or rgba() overlays.
   ============================================================ */

/* ---- Default hero images (set here so themes can override) ---- */
.op-hero--about  { background-image: url('/custom/images/hero-wellness.webp'); }
.op-hero--contact { background-image: url('/custom/images/person-nurse.webp'); }
.op-hero--lyc    { background-image: url('/custom/images/care-room.webp'); }
.op-hero--legal  { background-image: url('/custom/images/care-room.webp'); }

/* ---- odhomz: hero images ---- */
body[data-theme="odhomz"] .op-hero--about   { background-image: url('/custom/images/odhomz-hero.jpg'); }
body[data-theme="odhomz"] .op-hero--contact  { background-image: url('/custom/images/odhomz-person.jpg'); }
body[data-theme="odhomz"] .op-hero--lyc     { background-image: url('/custom/images/odhomz-care-1.jpg'); }
body[data-theme="odhomz"] .op-hero--legal   { background-image: url('/custom/images/odhomz-room.jpg'); }

/* ---- odhomz21: hero images ---- */
body[data-theme="odhomz21"] .op-hero--about  { background-image: url('/custom/images/odhomz21-hero.jpg'); }
body[data-theme="odhomz21"] .op-hero--contact { background-image: url('/custom/images/odhomz21-person.jpg'); }
body[data-theme="odhomz21"] .op-hero--lyc    { background-image: url('/custom/images/odhomz21-care-1.jpg'); }
body[data-theme="odhomz21"] .op-hero--legal  { background-image: url('/custom/images/odhomz21-about.jpg'); }

/* ---- odhomz23: hero images ---- */
body[data-theme="odhomz23"] .op-hero--about  { background-image: url('/custom/images/odhomz23-hero.jpg'); }
body[data-theme="odhomz23"] .op-hero--contact { background-image: url('/custom/images/odhomz23-person.jpg'); }
body[data-theme="odhomz23"] .op-hero--lyc    { background-image: url('/custom/images/odhomz23-care-1.jpg'); }
body[data-theme="odhomz23"] .op-hero--legal  { background-image: url('/custom/images/odhomz23-room.jpg'); }

/* ---- senion4: hero images ---- */
body[data-theme="senion4"] .op-hero--about   { background-image: url('/custom/images/senion4-hero.jpg'); }
body[data-theme="senion4"] .op-hero--contact  { background-image: url('/custom/images/senion4-person.jpg'); }
body[data-theme="senion4"] .op-hero--lyc     { background-image: url('/custom/images/senion4-care-1.jpg'); }
body[data-theme="senion4"] .op-hero--legal   { background-image: url('/custom/images/senion4-room.jpg'); }

/* ---- senion5: hero images ---- */
body[data-theme="senion5"] .op-hero--about   { background-image: url('/custom/images/senion5-hero.jpg'); }
body[data-theme="senion5"] .op-hero--contact  { background-image: url('/custom/images/senion5-person.jpg'); }
body[data-theme="senion5"] .op-hero--lyc     { background-image: url('/custom/images/senion5-care-1.jpg'); }
body[data-theme="senion5"] .op-hero--legal   { background-image: url('/custom/images/senion5-room.jpg'); }

/* ---- Hero gradient overlay tweaks per theme ---- */
/* odhomz / odhomz21: warmer pink overlay tint */
body[data-theme="odhomz"] .op-hero::before,
body[data-theme="odhomz21"] .op-hero::before {
    background: linear-gradient(120deg, rgba(0,0,0,.90), rgba(0,0,0,.78) 55%, rgba(0,0,0,.60));
}
/* odhomz23: deep teal-green + orange overlay */
body[data-theme="odhomz23"] .op-hero::before {
    background: linear-gradient(120deg, rgba(0,0,0,.92), rgba(0,0,0,.70) 60%, rgba(0,0,0,.55));
}
/* senion4 / senion5: deep navy-blue overlay */
body[data-theme="senion4"] .op-hero::before,
body[data-theme="senion5"] .op-hero::before {
    background: linear-gradient(120deg, rgba(0,0,0,.92), rgba(0,0,0,.72) 56%, rgba(0,0,0,.58));
}

/* ---- h1 em accent recolor per theme (hero) ---- */
body[data-theme="odhomz"] .op-hero h1 em,
body[data-theme="odhomz21"] .op-hero h1 em { color: var(--dm-sage); }
body[data-theme="odhomz23"] .op-hero h1 em  { color: var(--dm-sage); }
body[data-theme="senion4"] .op-hero h1 em,
body[data-theme="senion5"] .op-hero h1 em  { color: var(--dm-sage); }

/* ============================================================
   SECTION RESHAPING — About Us (.od-about__wrap + .od-serv-grid)
   ============================================================ */

/* senion4: reverse image/copy split on the story block */
body[data-theme="senion4"] .od-about__wrap {
    flex-direction: row-reverse;
}
/* senion5: also reverse; add wider gap for airy feel */
body[data-theme="senion5"] .od-about__wrap {
    flex-direction: row-reverse;
    gap: clamp(32px, 5vw, 72px);
}
/* odhomz23: bolder card radius on service/value grids */
body[data-theme="odhomz23"] .od-serv {
    border-radius: 24px;
}
/* odhomz21: compact service cards — tighter padding, 4-col on wide */
body[data-theme="odhomz21"] .od-serv-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
body[data-theme="odhomz21"] .od-serv {
    padding: 20px 18px 18px;
}
/* odhomz: image/copy split stays default but bump image border-radius */
body[data-theme="odhomz"] .od-about__media img {
    border-radius: 20px;
}
/* All non-default: swap the stats grid to 2-col on narrower screens */
body[data-theme="senion4"] .od-stats-grid,
body[data-theme="senion5"] .od-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 24px);
}

/* ============================================================
   SECTION RESHAPING — Contact Us
   ============================================================ */

/* senion4/5: reverse the image/copy block */
body[data-theme="senion4"] .dm-contact-wrap .od-about__wrap,
body[data-theme="senion5"] .dm-contact-wrap .od-about__wrap,
body[data-theme="senion4"] .od-sec--tint .od-about__wrap,
body[data-theme="senion5"] .od-sec--tint .od-about__wrap {
    flex-direction: row-reverse;
}
/* odhomz23: bolder contact method cards */
body[data-theme="odhomz23"] .od-serv { border-radius: 24px; }

/* odhomz21: compact contact card grid */
body[data-theme="odhomz21"] .od-serv-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

/* ============================================================
   SECTION RESHAPING — List Your Center
   ============================================================ */

/* senion4/5: swap the aside (benefits) to the right side */
body[data-theme="senion4"] .dm-lyc-grid,
body[data-theme="senion5"] .dm-lyc-grid {
    grid-template-columns: minmax(0,1fr) 340px;
}
body[data-theme="senion4"] .dm-lyc-aside,
body[data-theme="senion5"] .dm-lyc-aside {
    order: 2;
}
body[data-theme="senion4"] .dm-lyc-formwrap,
body[data-theme="senion5"] .dm-lyc-formwrap {
    order: 1;
}

/* odhomz23: bolder aside card radius */
body[data-theme="odhomz23"] .dm-lyc-aside {
    border-radius: 28px;
}
body[data-theme="odhomz23"] .dm-lyc-form .dm-lyc-fieldset {
    border-radius: 20px;
}

/* odhomz21: narrower aside, tighter gap (compact) */
body[data-theme="odhomz21"] .dm-lyc-grid {
    grid-template-columns: 280px minmax(0,1fr);
    gap: 18px;
}

/* odhomz: aside uses accent-mid tint */
body[data-theme="odhomz"] .dm-lyc-aside {
    background: var(--dm-teal-deep);
}

/* Reset column order at mobile (all themes) */
@media (max-width: 991px) {
    body[data-theme="senion4"] .dm-lyc-grid,
    body[data-theme="senion5"] .dm-lyc-grid,
    body[data-theme="odhomz21"] .dm-lyc-grid {
        grid-template-columns: 1fr;
    }
    body[data-theme="senion4"] .dm-lyc-aside,
    body[data-theme="senion5"] .dm-lyc-aside,
    body[data-theme="senion4"] .dm-lyc-formwrap,
    body[data-theme="senion5"] .dm-lyc-formwrap {
        order: unset;
    }
    body[data-theme="senion4"] .od-about__wrap,
    body[data-theme="senion5"] .od-about__wrap {
        flex-direction: column;
    }
}