/* ===========================================================================
   components.css — reusable section patterns across pages
   =========================================================================== */

/* ---- Split: text + media ---- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items:center; }
.split--media-left{ direction:rtl; }
.split--media-left > *{ direction:ltr; }
.split__text{ max-width: 52ch; }
.split__text .head h2{ margin-top: 6px; }
.split__text p{ color: var(--ink-2); margin-top: 18px; font-size: 1.06rem; }
.split__text .cta-row{ margin-top: 30px; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } .split--media-left{ direction:ltr; } }

.cta-row{ display:flex; flex-wrap:wrap; gap: 14px; align-items:center; }

/* ---- Service cards grid ---- */
.svc-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
@media (max-width: 900px){ .svc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .svc-grid{ grid-template-columns: 1fr; } }

.svc{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden; transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s, border-color .4s; }
.svc:hover{ transform: translateY(-7px); box-shadow: var(--shadow-soft); border-color: var(--accent-soft); }
.svc__media{ position:relative; aspect-ratio: 4/3.2; overflow:hidden; background:var(--cream-2); }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s cubic-bezier(.2,.7,.3,1); }
.svc:hover .svc__media img{ transform: scale(1.06); }
.svc__body{ padding: 22px 24px 26px; display:flex; flex-direction:column; gap:7px; flex:1; }
.svc__tag{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.svc__name{ font-family:var(--display); font-size: 1.5rem; line-height:1.1; }
.svc__foot{ margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; }
.svc__price{ font-family:var(--display); font-size:1.05rem; color:var(--ink); }
.svc__price small{ color:var(--ink-2); font-size:.8rem; font-family:var(--body); }
.svc__go{ font-size:.85rem; font-weight:600; color:var(--accent); }

/* ---- Approach band (colored) ---- */
.approach-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,2.4vw,34px); margin-top: clamp(36px,5vw,56px); }
@media (max-width: 860px){ .approach-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .approach-grid{ grid-template-columns: 1fr; } }
.approach-item{ border-top:1px solid currentColor; padding-top:18px; }
.approach-item .n{ font-family:var(--display); font-style:italic; opacity:.7; font-size:.95rem; }
.approach-item h3{ font-size:1.3rem; margin:8px 0 8px; }
.approach-item p{ opacity:.82; font-size:.95rem; }

/* ---- Places ---- */
.places{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,28px); }
@media (max-width: 760px){ .places{ grid-template-columns: 1fr; } }
.place{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding: clamp(24px,3vw,34px);
  transition: .4s; }
.place:hover{ border-color:var(--accent-soft); transform: translateY(-5px); box-shadow:var(--shadow-soft); }
.place .idx{ font-family:var(--display); font-style:italic; color:var(--accent); font-size:1.1rem; }
.place h3{ font-size:1.7rem; margin:10px 0 4px; }
.place .reg{ color:var(--ink-2); font-size:.95rem; }
.place .map{ margin-top:18px; aspect-ratio: 16/9; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, transparent 0 13px, color-mix(in srgb,var(--sage) 22%, transparent) 13px 14px),
    var(--cream-2);
  display:flex; align-items:flex-end; padding:12px; }
.place .map span{ font-family:var(--body); font-size:.72rem; letter-spacing:.08em; color:var(--ink-2);
  background:var(--paper); padding:4px 10px; border-radius:999px; border:1px solid var(--line); }

/* ---- Testimonials ---- */
.testi{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,28px); }
@media (max-width: 860px){ .testi{ grid-template-columns: 1fr; } }
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding: clamp(26px,3vw,36px);
  display:flex; flex-direction:column; gap:18px; }
.quote .mk{ font-family:var(--display); font-size:3rem; line-height:.6; color:var(--accent-soft); height:24px; }
.quote p{ font-family:var(--display); font-size:1.2rem; line-height:1.5; color:var(--ink); }
.quote .who{ margin-top:auto; display:flex; flex-direction:column; gap:2px; }
.quote .who b{ font-weight:600; }
.quote .who small{ color:var(--accent); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }

/* ---- Gift band ---- */
.gift{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--accent); color:#FBF5ED; }
@media (max-width:760px){ .gift{ grid-template-columns:1fr; } }
.gift__media{ position:relative; min-height:300px; }
.gift__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gift__body{ padding: clamp(34px,5vw,64px); display:flex; flex-direction:column; justify-content:center; gap:18px; }
.gift__body .eyebrow{ color:var(--accent-soft); }
.gift__body h2{ font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.8rem); }
.gift__body p{ opacity:.92; max-width:40ch; }

/* ---- CTA band ---- */
.cta-band{ text-align:center; display:grid; gap:22px; justify-items:center; }
.cta-band h2{ font-size: clamp(2.1rem, 5vw, 3.8rem); max-width: 18ch; }
.cta-band p{ color:var(--ink-2); max-width: 52ch; }

/* ---- Section intro head centered ---- */
.head--center{ justify-items:center; text-align:center; }
.head--center .eyebrow{ justify-content:center; }
.head--center .lead{ max-width: 56ch; }

/* ====================================================================
   Upcoming dates (public)
   ==================================================================== */
.dates-list{ display:grid; gap:14px; max-width:760px; margin: clamp(30px,4vw,46px) auto 0; }
.date-row{ display:flex; align-items:center; gap:clamp(16px,2.4vw,28px); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,2.2vw,22px) clamp(18px,2.6vw,28px); }
.date-row__day{ flex:0 0 auto; text-align:center; line-height:1; min-width:58px; }
.date-row__day .d{ font-family:var(--display); font-size:2.1rem; color:var(--accent); }
.date-row__day .m{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }
.date-row__body{ flex:1; min-width:0; }
.date-row__city{ font-family:var(--display); font-size:1.35rem; color:var(--ink); }
.date-row__meta{ color:var(--ink-2); font-size:.95rem; margin-top:3px; display:flex; flex-wrap:wrap; gap:6px 14px; }
.date-row__meta .svc{ color:var(--accent); }
.date-row .btn{ flex:0 0 auto; }
.dates-empty{ text-align:center; color:var(--ink-2); max-width:46ch; margin:30px auto 0; font-size:1.05rem; }
@media (max-width:560px){
  .date-row{ flex-wrap:wrap; }
  .date-row .btn{ width:100%; justify-content:center; }
}

/* ====================================================================
   Instagram strip (public)
   ==================================================================== */
.insta-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-bottom: clamp(26px,3.4vw,40px); }
.insta-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:clamp(8px,1vw,14px); }
.insta-cell{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--radius-sm); display:block; background:var(--cream-2); }
.insta-cell img{ width:100%; height:100%; object-fit:cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.insta-cell:hover img{ transform: scale(1.07); }
.insta-cell__cap{ position:absolute; inset:auto 0 0 0; padding:24px 12px 11px; font-size:.8rem; color:#fff;
  background:linear-gradient(transparent, rgba(30,22,14,.72)); opacity:0; transition:opacity .3s ease; line-height:1.3; }
.insta-cell:hover .insta-cell__cap{ opacity:1; }
.insta-cell__ig{ position:absolute; top:9px; right:9px; width:22px; height:22px; opacity:0; transition:opacity .3s ease; color:#fff; }
.insta-cell:hover .insta-cell__ig{ opacity:.95; }
@media (max-width:900px){ .insta-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:520px){ .insta-grid{ grid-template-columns: repeat(2,1fr); } }

/* ====================================================================
   Leave-a-review form (public)
   ==================================================================== */
.review-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,52px); max-width:680px; margin:clamp(30px,4vw,44px) auto 0; box-shadow:var(--shadow-soft); }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.field input, .field select, .field textarea{ width:100%; background:var(--cream); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:13px 15px; font-family:var(--body); font-size:1rem; color:var(--ink); }
.field textarea{ min-height:120px; resize:vertical; font-family:var(--display); font-size:1.08rem; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.star-pick{ display:flex; gap:6px; }
.star-pick button{ background:none; border:none; cursor:pointer; font-size:1.7rem; line-height:1; color:var(--line); padding:0; transition:color .15s; }
.star-pick button.on{ color:var(--gold); }
.review-thanks{ text-align:center; padding:clamp(28px,4vw,52px); }
.review-thanks .mk{ font-family:var(--display); font-size:3rem; color:var(--accent-soft); }
.quote .stars{ color:var(--gold); letter-spacing:2px; font-size:.95rem; }

/* ---- Agenda subscribe CTA ---- */
.dates-cta{ display:flex; justify-content:center; margin-top:clamp(26px,3.4vw,40px); }
.dates-cta .btn{ max-width:640px; text-align:center; }

/* ---- Public subscribe modal ---- */
.ew-modal{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:20px; }
.ew-modal.on{ display:flex; }
.ew-modal__bg{ position:absolute; inset:0; background:rgba(40,30,20,.5); backdrop-filter:blur(4px); }
.ew-modal__box{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,46px); max-width:520px; width:100%; max-height:92vh; overflow:auto; box-shadow:var(--shadow); animation:admfade .35s ease; }
.ew-modal__box h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,3vw,2.1rem); margin:10px 0 8px; }
.ew-modal__lead{ color:var(--ink-2); margin-bottom:22px; }
.ew-modal__x{ position:absolute; top:14px; right:16px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:var(--cream); color:var(--ink-2); font-size:1.3rem; line-height:1; cursor:pointer; transition:all .18s; }
.ew-modal__x:hover{ border-color:var(--accent); color:var(--accent); }
.news-form--modal{ display:flex; flex-direction:column; gap:13px; }
.news-form--modal input{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; font-family:var(--body); font-size:1rem; color:var(--ink); }
.news-form--modal input:focus{ outline:none; border-color:var(--accent); }
.news-form--modal input::placeholder{ color:var(--ink-3); }
.news-form--modal .news-cities__lbl{ display:block; font-size:.78rem; letter-spacing:.04em; color:var(--ink-2); margin:2px 0 10px; }
.news-form--modal .news-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.news-form--modal .news-chip span{ display:inline-block; padding:7px 13px; border-radius:999px; font-size:.85rem;
  border:1px solid var(--line); color:var(--ink-2); cursor:pointer; transition:all .2s; }
.news-form--modal .news-chip input{ position:absolute; opacity:0; }
.news-form--modal .news-chip input:checked + span{ background:var(--accent); border-color:var(--accent); color:#fff; }
.news-form--modal .news-chip{ position:relative; }
.ew-modal__ok{ text-align:center; padding:24px 0 8px; }
.ew-modal__ok .mk{ font-family:var(--display); font-size:2.6rem; color:var(--accent-soft); }