/* HORMONAL DISORDERS PAGE («Ορμονικές Διαταραχές», URL /ορμονικές-διαταραχές/, page 3548 — content option A, see
   TI-078). Loaded after tokens.css + site-chrome.css (locked global header/footer, untouched here). Owner rules
   (2026-09-28): content locked, presentation free, a real hero with its own personality, no extra UI.
   Personality: two generations. Hero = a mother and her adult daughter in warm light on the LEFT, melting into a warm
   sand field (gold glow, faint petrol) on the right where the title sits. Topics = two edge-to-edge «chapters»: full-bleed
   photo halves (the articles' own images) with the title and «Περισσότερα» over a soft veil. Mobile: the photo leads the
   hero, the title follows on the sand; the chapters stack. */
:root{--r-gutter:clamp(20px,4vw,72px);--r-max:1200px}
.page-ormonikes .callband{margin:0}

/* ---------- hero ---------- */
.rh{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse 36% 70% at 82% 22%,rgba(232,201,90,.22) 0%,rgba(232,201,90,0) 70%),
             radial-gradient(ellipse 40% 70% at 104% 110%,rgba(5,116,133,.14) 0%,rgba(5,116,133,0) 70%),
             linear-gradient(100deg,#EFE3D4 0%,#F6EEE4 55%,#F1E5D6 100%)}
.rh__bg{position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;
  -webkit-mask:linear-gradient(90deg,#000 0%,#000 56%,rgba(0,0,0,.6) 76%,transparent 100%);mask:linear-gradient(90deg,#000 0%,#000 56%,rgba(0,0,0,.6) 76%,transparent 100%)}
.rh__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.rh__in{width:min(100% - 2 * var(--r-gutter),var(--r-max));margin-inline:auto;min-height:clamp(380px,32vw,470px);box-sizing:border-box;
  display:flex;align-items:center;justify-content:flex-end;padding:clamp(32px,3.4vw,52px) 0 clamp(64px,7vw,110px)}
.rh__text{width:min(42%,500px)}
.rh .crumbs ol{color:#6E6358;margin-bottom:clamp(12px,1.4vw,18px)}
.rh .crumbs a{color:var(--petrol);text-decoration-color:rgba(5,116,133,.35);text-underline-offset:3px}
.rh .crumbs a:hover{color:var(--petrol-d)}
.rh__h{margin:0;font-size:clamp(36px,4.2vw,64px);line-height:1.04;letter-spacing:-.03em;font-weight:var(--fw-h);color:var(--ink);text-wrap:balance}
.rh__wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(40px,6vw,104px);display:block;z-index:1}
.rh__wave-fill{fill:#F6EEE4}
.rh__wave-line{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-opacity:.9;vector-effect:non-scaling-stroke}
.rh__h::after{content:"";display:block;width:60px;height:3px;border-radius:3px;background:var(--gold);margin-top:clamp(16px,1.8vw,24px)}

/* ---------- chapters (owner correction 2026-09-28: separated from the hero and the call band, rounded «leaf» cards
   instead of square blocks, each with an offset gold outline; the two mirror each other) ---------- */
.rc{background:linear-gradient(180deg,#F6EEE4 0%,#FBF8F4 45%,#fff 100%);padding:clamp(52px,5.6vw,96px) 0 clamp(72px,7.4vw,124px)}
.rc__list{list-style:none;margin:0 auto;padding:0;width:min(100% - 2 * var(--r-gutter),var(--r-max));
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4.4vw,72px)}
.rc__it{position:relative;isolation:isolate;--leaf:clamp(70px,9vw,140px);--leaf-s:clamp(18px,2vw,28px)}
.rc__it::before{content:"";position:absolute;z-index:-1;inset:16px -16px -16px 16px;border:1.5px solid var(--gold);
  border-radius:var(--leaf) var(--leaf-s) var(--leaf) var(--leaf-s)}
.rc__it:nth-child(2)::before{inset:16px 16px -16px -16px;border-radius:var(--leaf-s) var(--leaf) var(--leaf-s) var(--leaf)}
.rcc{position:relative;isolation:isolate;overflow:hidden;height:clamp(380px,32vw,500px);color:#fff;
  border-radius:var(--leaf) var(--leaf-s) var(--leaf) var(--leaf-s);box-shadow:0 36px 64px -40px rgba(60,40,24,.55)}
.rc__it:nth-child(2) .rcc{border-radius:var(--leaf-s) var(--leaf) var(--leaf-s) var(--leaf)}
.rcc__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-std,ease)}
.rcc::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,14,0) 36%,rgba(14,14,14,.32) 60%,rgba(14,14,14,.82) 100%)}
.rcc:hover .rcc__img{transform:scale(1.04)}
.rcc__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,2.8vw,44px) clamp(26px,3vw,48px)}
.rc__it:nth-child(2) .rcc__body{padding-left:clamp(26px,3vw,48px)}
.rcc__n{margin:0 0 10px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:var(--fw-h);letter-spacing:.12em;color:var(--gold);font-variant-numeric:tabular-nums}
.rcc__n::after{content:"";width:36px;height:2px;border-radius:2px;background:var(--gold)}
.rcc__t{margin:0 0 clamp(16px,1.8vw,24px);max-width:16ch;font-size:clamp(26px,2.6vw,40px);line-height:1.12;letter-spacing:-.02em;font-weight:var(--fw-h);text-shadow:0 2px 16px rgba(0,0,0,.35)}
.rcc__t a{color:#fff;text-decoration:none}
.rcc__t a::after{content:"";position:absolute;inset:0;z-index:0}      /* whole chapter opens the topic */
.rcc__t a:focus-visible{outline:none}
.rcc:has(.rcc__t a:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.rcc__more{position:relative;z-index:1;margin:0}
.rcc__btn{background:#fff;color:var(--petrol);border-color:#fff}
.rcc__btn:hover{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.rcc__btn svg{transition:transform .15s ease}
.rcc__btn:hover svg{transform:translateX(3px)}

/* ---------- mobile: its own composition ---------- */
@media (max-width:767px){
  .rh{display:flex;flex-direction:column}
  .rh__bg{position:relative;width:100%;height:auto;aspect-ratio:4/3;z-index:0;
    -webkit-mask:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);mask:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}
  .rh__bg img{object-position:50% 18%}
  .rh__in{min-height:0;justify-content:flex-start;padding:4px 0 58px;margin-top:-10px;position:relative}
  .rh__wave{height:36px}
  .rh__text{width:100%}
  .rh .crumbs ol{margin-bottom:10px}
  .rh__h{font-size:clamp(32px,9vw,40px)}
  .rc{padding:34px 0 64px}
  .rc__list{grid-template-columns:1fr;gap:40px;width:calc(100% - 2 * var(--r-gutter) - 12px);margin-left:var(--r-gutter)}
  .rc__it{--leaf:72px;--leaf-s:18px}
  .rc__it::before{inset:10px -10px -10px 10px}
  .rc__it:nth-child(2)::before{inset:10px -10px -10px 10px}
  .rcc{height:clamp(320px,86vw,390px)}
  .rcc__body,.rc__it:nth-child(2) .rcc__body{padding:22px 22px 24px}
  .rcc__t{font-size:clamp(24px,7vw,30px)}
}
@media (prefers-reduced-motion:reduce){
  .rcc__img,.rcc__btn svg{transition:none}
  .rcc:hover .rcc__img{transform:none}
}