/* GYNAECOLOGICAL ARTICLES PAGE («Γυναικολογικά Άρθρα», LIVE /gynaikologika-arthra/). Loaded after tokens.css +
   site-chrome.css (locked global header/footer, untouched here). Owner rules (2026-09-28): content locked, presentation
   free, every page a real hero visual with its own personality.
   Hero (owner correction, 2026-09-28): cinematic — a woman's silhouette turned towards warm window light, melting into a
   deep petrol → warm graphite field that holds the title; a soft curve into the library.
   Library: magazine mosaic in blocks — one large story card (owner's four) + four cards, the big card alternating sides,
   closing with two wide cards, so every row ends on the same line. Tablet/mobile: two columns, story/wide cards full width. */
:root{--ga-gutter:clamp(20px,4vw,72px);--ga-max:1240px}
.page-gynaikologika-arthra .callband{margin:0}

/* ---------- hero ---------- */
.gah{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:radial-gradient(ellipse 40% 70% at 52% 40%,rgba(232,150,80,.2) 0%,rgba(232,150,80,0) 70%),
             linear-gradient(105deg,#07343C 0%,#0B2B30 36%,#1C1F1E 68%,#2B1E16 100%)}
.gah__photo{position:absolute;top:0;bottom:0;right:0;width:min(66%,1180px);z-index:-1;
  -webkit-mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.8) 24%,#000 46%);mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.8) 24%,#000 46%)}
.gah__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 8%}
.gah__in{width:min(100% - 2 * var(--ga-gutter),var(--ga-max));margin-inline:auto;min-height:clamp(420px,36vw,580px);box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,4vw,60px) 0 clamp(80px,7.5vw,130px)}
.gah .crumbs ol{color:#B9C7C9;margin-bottom:clamp(14px,1.6vw,22px)}
.gah .crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.gah .crumbs a:hover{color:var(--gold)}
.gah__h{margin:0;max-width:10ch;font-size:clamp(40px,4.6vw,70px);line-height:1.04;letter-spacing:-.03em;font-weight:var(--fw-h);color:#fff;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.gah__h::after{content:"";display:block;width:64px;height:3px;border-radius:3px;background:var(--gold);margin-top:clamp(18px,2vw,26px)}
.gah__curve{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(30px,4.6vw,78px);display:block}
.gah__curve path{fill:var(--off)}

/* ---------- library: magazine mosaic ---------- */
.gam{background:var(--off);padding:clamp(20px,2.6vw,40px) 0 clamp(64px,7vw,120px)}
.gam__list{list-style:none;margin:0 auto;padding:0;width:min(100% - 2 * var(--ga-gutter),var(--ga-max));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);grid-auto-flow:dense}
.gam__it--big{grid-column:1 / span 2;grid-row:span 2}
.gam__it--big.gam__it--r{grid-column:3 / span 2}
.gam__it--wide{grid-column:span 2}
.gac{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 22px 44px -32px rgba(17,25,34,.4),0 1px 3px rgba(17,25,34,.05);transition:transform .3s var(--ease-std,ease),box-shadow .3s var(--ease-std,ease)}
.gac:hover{transform:translateY(-4px);box-shadow:0 30px 56px -30px rgba(17,25,34,.45),0 1px 3px rgba(17,25,34,.05)}
.gac:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.gac__media{aspect-ratio:4/3;overflow:hidden;background:#dfe7e8}
.gac__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-std,ease)}
.gac:hover .gac__media img{transform:scale(1.04)}
.gac__body{flex:1;padding:16px 18px 20px}
.gac__n{margin:0 0 6px;font-size:12px;font-weight:var(--fw-h);letter-spacing:.12em;color:var(--gold-t);font-variant-numeric:tabular-nums}
.gac__t{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.3;font-weight:var(--fw-h);letter-spacing:-.005em;color:var(--ink);transition:color .15s ease}
.gac__t a{color:inherit;text-decoration:none}
.gac__t a::after{content:"";position:absolute;inset:0}                 /* whole card = the title link (one tab stop) */
.gac__t a:focus-visible{outline:none}
.gac:hover .gac__t{color:var(--petrol)}
/* story card */
.gam__it--big .gac__media{flex:1;aspect-ratio:auto;min-height:260px}
.gam__it--big .gac__body{flex:none;padding:24px 28px 28px;display:flex;align-items:baseline;gap:16px}
.gam__it--big .gac__n{font-size:14px;margin:0}
.gam__it--big .gac__t{font-size:clamp(22px,2vw,30px);line-height:1.18}

/* wide closing cards: image beside the title */
.gam__it--wide .gac{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.gam__it--wide .gac__media{aspect-ratio:auto;min-height:100%}
.gam__it--wide .gac__body{display:flex;flex-direction:column;justify-content:center;padding:22px 26px}
.gam__it--wide .gac__t{font-size:clamp(18px,1.5vw,22px)}

/* ---------- tablet + mobile: two columns ---------- */
@media (max-width:1023px){
  .gam__list{grid-template-columns:1fr 1fr}
  .gam__it--big,.gam__it--big.gam__it--r,.gam__it--wide{grid-column:1 / -1;grid-row:auto}
  .gam__it--big .gac__media{aspect-ratio:16/9;min-height:0;flex:none}
}
/* ---------- mobile: its own composition ---------- */
@media (max-width:767px){
  .gah__photo{width:100%;-webkit-mask:none;mask:none}
  .gah__photo img{object-position:44% 4%}
  .gah__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,40,46,.55) 0%,rgba(7,40,46,.1) 30%,rgba(12,30,32,.35) 58%,rgba(10,28,31,.92) 100%)}
  .gah__in{min-height:420px;justify-content:flex-end;padding:22px 0 64px}
  .gah .crumbs{position:absolute;top:22px}
  .gah__in{position:relative}
  .gah__h{font-size:clamp(34px,9.6vw,44px)}
  .gah__h::after{width:52px}
  .gam{padding-top:14px}
  .gam__list{gap:12px}
  .gam__it--big .gac__media{aspect-ratio:16/10}
  .gam__it--big .gac__body{padding:16px 18px 18px;gap:12px}
  .gam__it--big .gac__t{font-size:21px}
  .gam__it--wide .gac{grid-template-columns:42% 1fr}
  .gam__it--wide .gac__body{padding:14px 16px}
  .gam__it--wide .gac__t{font-size:17px}
  .gac{border-radius:16px}
  .gac__body{padding:12px 12px 14px}
  .gac__n{font-size:11px;margin-bottom:4px}
  .gac__t{font-size:15px;line-height:1.28;hyphens:auto}
}
@media (prefers-reduced-motion:reduce){
  .gac,.gac__media img,.gac__t{transition:none}
  .gac:hover,.gac:hover .gac__media img{transform:none}
}