/* =====================================================================
   RESIDENCES — SERVICES ARCHIVE  ·  "UNFOLDING INDEX"  (child-theme build)
   File:  wp-content/themes/<child-theme>/assets/css/archive-services.css
   Enqueued conditionally from the child theme functions.php (see snippet).
   Approved layout = ex-"v2.7". Single source of truth for the /services/
   archive styling.

   NOTE: the two JS snippets stay in the Elementor archive template:
     • top:    <script>document.documentElement.classList.add('svc-acc');</script>
     • bottom: accordion init  +  .svc-panel click stopPropagation
   The collapse/affordance is gated on html.svc-acc, so with JS off every
   row renders fully expanded (failsafe).
   ===================================================================== */

.services-editorial{
  --ivory:#FAF7F2; --sand:#F0EAE0; --champagne:#EFE5D2;
  --bronze:#B8976A; --espresso:#3D2F22; --charcoal:#2C2C2C;
  --b12:rgba(184,151,106,.12); --b20:rgba(184,151,106,.20);
  --b32:rgba(184,151,106,.32); --b40:rgba(184,151,106,.40);
  --serif:"EB Garamond",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --svc-ratio:4 / 3;
  counter-reset:svc;
}

/* ---------- ROW BAND ---------- */
.services-editorial .svc-item{
  counter-increment:svc;
  padding-block:48px;            /* base = expanded (JS-off failsafe) */
  border-top:1px solid var(--b20);
}

/* ---------- ROW GRID: text | image (minmax = the track-shrink fix) ---------- */
.services-editorial .svc-item__inner{
  display:grid !important;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  column-gap:48px;
  align-items:start;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:48px;
}
.services-editorial .svc-item__body{ display:flex !important; flex-direction:column !important; order:1; min-width:0; }
.services-editorial .svc-item__media{ order:2; min-width:0; overflow:hidden; }

/* ---------- HEAD: number | (title/tagline over panel) ---------- */
.services-editorial .svc-head{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(20px,3vw,34px);
  align-items:start;
  position:relative;            /* anchor for the +/- affordance */
  width:100%;
}
.services-editorial .svc-head > .elementor-widget-html:first-child{ grid-column:1; grid-row:1; align-self:start; }
.services-editorial .svc-head-text{ grid-column:2; grid-row:1; min-width:0; display:flex !important; flex-direction:column !important; padding-right:46px; }
.services-editorial .svc-head > .svc-panel{ grid-column:2; grid-row:2; min-width:0; }

/* defeat Elementor/Astra `.e-loop-item * { word-break: break-word }` on headings */
.services-editorial .svc-title,
.services-editorial .svc-title .elementor-heading-title,
.services-editorial .svc-title a,
.services-editorial .svc-tagline,
.services-editorial .svc-tagline p{ word-break:normal !important; overflow-wrap:normal; }

/* ---------- HEAD TYPOGRAPHY ---------- */
.services-editorial .svc-num{
  display:block;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(32px,3.8vw,50px); line-height:1; letter-spacing:.01em;
  color:var(--b40); transition:color .35s var(--ease);
}
.services-editorial .svc-num::before{ content:counter(svc,decimal-leading-zero); }
.services-editorial .svc-title .elementor-heading-title,
.services-editorial .svc-title .elementor-heading-title a{
  margin:0;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(23px,2.5vw,32px); line-height:1.14; color:var(--charcoal);
  text-decoration:none; transition:color .3s var(--ease);
}
.services-editorial .svc-tagline,
.services-editorial .svc-tagline p{
  margin:6px 0 0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(16px,1.4vw,19px); line-height:1.4; color:var(--bronze);
}

/* ---------- PANEL CONTENT ---------- */
.services-editorial .svc-panel{ margin-top:18px; }
.services-editorial .svc-excerpt,
.services-editorial .svc-excerpt p{
  margin:0 0 22px; max-width:52ch;
  font-family:var(--sans); font-size:16px; line-height:1.75; color:var(--charcoal);
}
.services-editorial .svc-benefits{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:13px; max-width:54ch; }
.services-editorial .svc-benefits li{ position:relative; padding-left:22px; font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--charcoal); }
.services-editorial .svc-benefits .b-arrow{ position:absolute; left:0; top:0; color:var(--bronze); font-weight:600; font-size:16px; line-height:1.6; }
.services-editorial .svc-benefits strong{ color:var(--espresso); font-weight:600; }
.services-editorial .svc-chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 24px; padding:0; }
.services-editorial .svc-chip{
  font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; line-height:1;
  color:var(--espresso); background:var(--b12); border:1px solid var(--b32); padding:7px 13px;
}
.services-editorial .svc-cta .elementor-button{
  display:inline-flex; align-items:center; gap:9px; padding:15px 34px;
  background:var(--bronze); color:#fff;
  font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--bronze); border-radius:0;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.services-editorial .svc-cta .elementor-button:hover{ background:var(--espresso); border-color:var(--espresso); transform:translateY(-1px); }
.services-editorial .svc-cta .elementor-button::after{ content:"→"; margin-left:2px; transition:transform .3s var(--ease); }
@media (hover:hover){ .services-editorial .svc-cta .elementor-button:hover::after{ transform:translateX(4px); } }

/* ---------- MEDIA ---------- */
.services-editorial .svc-loop__img{ position:relative; overflow:hidden; }
.services-editorial .svc-loop__img img{ display:block; width:100%; max-width:100%; aspect-ratio:var(--svc-ratio); object-fit:cover; transition:transform 1.2s var(--ease); }
.services-editorial .svc-loop__img::before,
.services-editorial .svc-loop__img::after{ content:""; position:absolute; width:26px; height:26px; border-color:var(--bronze); opacity:0; transition:opacity .55s var(--ease); pointer-events:none; }
.services-editorial .svc-loop__img::before{ top:14px; left:14px; border-top:1px solid; border-left:1px solid; }
.services-editorial .svc-loop__img::after{ bottom:14px; right:14px; border-bottom:1px solid; border-right:1px solid; }

/* =====================================================================
   ACCORDION STATE  (only active when JS adds html.svc-acc)
   ===================================================================== */
.svc-acc .services-editorial .svc-item{ padding-block:14px; transition:padding-block .45s var(--ease); }   /* compact when closed */
.svc-acc .services-editorial .svc-item.is-open{ padding-block:44px; }                                       /* open breathes */

.svc-acc .services-editorial .svc-head{ cursor:pointer; }
.svc-acc .services-editorial .svc-head:hover .svc-title .elementor-heading-title{ color:var(--bronze); }
.svc-acc .services-editorial .svc-item.is-open .svc-num{ color:var(--bronze); }
.svc-acc .services-editorial .svc-item.is-open .svc-title .elementor-heading-title{ color:var(--espresso); }

/* hide the tagline when collapsed; it reappears on open */
.svc-acc .services-editorial .svc-item:not(.is-open) .svc-tagline{ display:none; }

/* +/- affordance — ONE circular control at the row's right (cannot split) */
.svc-acc .services-editorial .svc-head::after{
  content:""; position:absolute; top:4px; right:0; box-sizing:border-box;
  width:30px; height:30px; border:1px solid var(--b32); border-radius:50%;
  background:
    linear-gradient(var(--bronze),var(--bronze)) center / 13px 1.6px no-repeat,
    linear-gradient(var(--bronze),var(--bronze)) center / 1.6px 13px no-repeat;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
  pointer-events:none;
}
.svc-acc .services-editorial .svc-item.is-open .svc-head::after{
  background:
    linear-gradient(var(--bronze),var(--bronze)) center / 13px 1.6px no-repeat;   /* + becomes − */
}
.svc-acc .services-editorial .svc-head:hover::after{ border-color:var(--bronze); background-color:var(--b12); }

/* collapse the panel completely (no reserved space) */
.svc-acc .services-editorial .svc-panel{
  max-height:0; overflow:hidden; opacity:0; margin:0; padding:0;
  transition:max-height .55s var(--ease), opacity .4s var(--ease), margin .4s var(--ease);
}
.svc-acc .services-editorial .svc-item.is-open .svc-panel{ max-height:600px; opacity:1; margin-top:18px; }

/* DESKTOP: collapse the image column */
@media (min-width:881px){
  .svc-acc .services-editorial .svc-item__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,0fr); column-gap:0;
    transition:grid-template-columns .55s var(--ease), column-gap .55s var(--ease);
  }
  .svc-acc .services-editorial .svc-item.is-open .svc-item__inner{
    grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); column-gap:48px;
  }
  .svc-acc .services-editorial .svc-item.is-open .svc-loop__img::before,
  .svc-acc .services-editorial .svc-item.is-open .svc-loop__img::after{ opacity:1; }
  .svc-acc .services-editorial .svc-item.is-open:hover .svc-loop__img img{ transform:scale(1.04); }
}

/* ---------- MOBILE ≤880px ---------- */
@media (max-width:880px){
  .services-editorial .svc-item{ padding-block:36px; }
  .svc-acc .services-editorial .svc-item{ padding-block:12px; }
  .svc-acc .services-editorial .svc-item.is-open{ padding-block:32px; }
  .services-editorial .svc-item__inner{ grid-template-columns:minmax(0,1fr) !important; column-gap:0 !important; padding-inline:22px; }
  .services-editorial .svc-num{ font-size:28px; }
  .services-editorial .svc-excerpt,
  .services-editorial .svc-excerpt p,
  .services-editorial .svc-benefits{ max-width:none; }
  .svc-acc .services-editorial .svc-item__media{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .55s var(--ease), opacity .4s var(--ease);
  }
  .svc-acc .services-editorial .svc-item.is-open .svc-item__media{ max-height:85vh; opacity:1; margin-top:20px; }
  .svc-acc .services-editorial .svc-loop__img::before,
  .svc-acc .services-editorial .svc-loop__img::after{ display:none; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){ .services-editorial *{ transition:none !important; } }

/* =====================================================================
   SHARED EYEBROW + BUTTONS / ΕΠΙΛΕΓΜΕΝΑ ΕΡΓΑ / CTA BAND  (unchanged)
   ===================================================================== */
.svc-selected .svc-eyebrow{ font-family:var(--serif); font-style:italic; font-size:15px; letter-spacing:.08em; color:#B8976A; margin:0 0 8px; }
.svc-btn{
  display:inline-flex; align-items:center; gap:9px; padding:16px 40px;
  font-family:"Inter",system-ui,sans-serif; font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border-radius:0;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.svc-btn--ghost{ background:transparent; color:#3D2F22; border:1px solid #B8976A; }
.svc-btn--ghost:hover{ background:#B8976A; color:#fff; transform:translateY(-2px); }

.svc-selected{ background:#FAF7F2; padding:72px 24px; }
.svc-selected__inner{ max-width:1240px; margin-inline:auto; text-align:center; }
.svc-selected__title{ margin:0 0 14px; font-family:"EB Garamond",Georgia,serif; font-weight:500; font-size:clamp(26px,3vw,38px); line-height:1.16; color:#2C2C2C; }
.svc-selected__lead{ max-width:640px; margin:0 auto 40px; font-family:"Inter",system-ui,sans-serif; font-size:16px; line-height:1.7; color:#2C2C2C; }
.svc-selected__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:0 0 40px; padding:0; text-align:left; }
.svc-selected__card{ position:relative; }
.svc-selected__link{ display:block; text-decoration:none; color:inherit; }
.svc-selected__media{ display:block; overflow:hidden; aspect-ratio:3/2; background:#F0EAE0; }
.svc-selected__media--empty{ background:#EFE5D2; }
.svc-selected__img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
@media (hover:hover){ .svc-selected__card:hover .svc-selected__img{ transform:scale(1.05); } }
.svc-selected__meta{ display:block; padding-top:16px; }
.svc-selected__eyebrow{ display:block; font-family:"Inter",system-ui,sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#B8976A; margin-bottom:6px; }
.svc-selected__name{ display:block; font-family:"EB Garamond",Georgia,serif; font-size:22px; line-height:1.2; color:#2C2C2C; }
.svc-selected__cta{ display:flex; justify-content:center; }

.svc-cta-band{ background:#B8976A; padding:80px 24px; }
.svc-cta-band__inner{ max-width:760px; margin-inline:auto; text-align:center; }
.svc-cta-band__title{ margin:0 0 16px; font-family:"EB Garamond",Georgia,serif; font-weight:500; font-size:clamp(28px,3.6vw,42px); line-height:1.18; color:#FFFFFF; }
.svc-cta-band__text{ max-width:600px; margin:0 auto 30px; font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.75; color:#FFFFFF; }
.svc-cta-band__buttons{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.svc-cta-band .svc-btn--solid{ background:#1A1714; color:#FFFFFF; border:1px solid rgba(255,255,255,.35); }
.svc-cta-band .svc-btn--solid:hover{ background:#FFFFFF; color:#1A1714; border-color:#FFFFFF; transform:translateY(-2px); }
.svc-cta-band .svc-btn--ghost-dark{ background:transparent !important; color:#FFFFFF !important; border:1px solid #FFFFFF !important; }
.svc-cta-band .svc-btn--ghost-dark:hover{ background:#FFFFFF !important; color:#B8976A !important; border-color:#FFFFFF !important; transform:translateY(-2px); }

@media (max-width:880px){
  .svc-selected{ padding:52px 20px; }
  .svc-selected__grid{ grid-template-columns:minmax(0,1fr); gap:28px; margin-bottom:32px; }
  .svc-cta-band{ padding:56px 20px; }
  .svc-cta-band__buttons{ flex-direction:column; align-items:stretch; }
  .svc-cta-band__buttons .svc-btn,
  .svc-selected__cta .svc-btn{ width:100%; justify-content:center; padding:16px 24px; }
}