/* =========================================================
   Your Experience — page-specific styles
   ========================================================= */

/* --- 02 · Hero --- */
.ye-hero{
  position: relative;
  min-height: 460px;
  background: var(--c-black-2);
  display: flex;
  align-items: flex-end;
}
.ye-hero-media{ position:absolute; inset:0; }
.ye-hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center 18%; }
.ye-hero-overlay{ position:absolute; inset:38.333% 0 0 0; background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,.2) 32.212%, rgba(13,13,13,.51) 70.192%, rgba(13,13,13,.51) 100%); }
.ye-hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--gutter-mobile) 56px;
  color: var(--c-cream);
}
@media (min-width:1360px){ .ye-hero-content{ padding-left:0; padding-right:0; } }
@media (min-width:700px){ .ye-hero{ min-height:600px; } }
.ye-hero-content .eyebrow{ margin-bottom: 16px; }
.ye-hero-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-cream);
}
.ye-hero-title .accent{
  font-family: var(--font-serif-italic);
  font-weight: 500;
  font-style: italic;
  color: var(--c-gold);
  font-size: 1.18em;
  letter-spacing: -0.02em;
}
.ye-hero-sub{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(15px, 2vw, 20px);
  color: #cfc8bd;
  margin-top: 16px;
  max-width: 560px;
}

/* --- 03 · Ways to Celebrate --- */
.ye-intro .h-display{ font-size: clamp(30px, 4vw, 48px); }
.ye-intro .h-script{ font-size: clamp(24px, 3.4vw, 40px); margin-top: 6px; }
.ye-intro .lede{ margin-top: 22px; max-width: 720px; }
.ye-cards{
  margin-top: 44px;
  background: rgba(253,250,246,.7);
  border-radius: 15px;
  padding: 32px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
@media (max-width: 900px){ .ye-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ye-cards{ grid-template-columns: 1fr; padding: 28px 24px; } }
.ye-card p{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-text);
  margin-bottom: 18px;
  min-height: 34px;
}
.ye-card-btn.btn.btn-primary{
  height: 46px;
  width: 100%;
  padding: 0 14px;
  font-size: 10px;
  letter-spacing: 1.3px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* --- 04–07 · Detail sections (alternating image / content) ---
   Fixed center axis: content is a fixed-width block anchored to the
   container's exact horizontal midpoint; only the photo grows outward
   (left for img-left tiles, right for img-right tiles) as the viewport
   widens. The text/photo boundary never shifts between tiles. */
.ye-detail{ position: relative; min-height: 740px; }
.ye-detail-media{ position:absolute; top:0; bottom:0; background: var(--c-black-2); }
.ye-detail-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ye-detail-content{
  position: absolute;
  top: 0; bottom: 0;
  width: min(640px, 47vw);
  padding: 72px 40px;
  overflow-y: visible;
}
@media (min-width: 1000px){
  .ye-detail--img-right .ye-detail-content{ right: 50%; left: auto; }
  .ye-detail--img-right .ye-detail-media{ left: 50%; right: 0; }
  .ye-detail--img-left .ye-detail-content{ left: 50%; right: auto; }
  .ye-detail--img-left .ye-detail-media{ left: 0; right: 50%; }
}
@media (min-width:1360px){
  .ye-detail--img-right .ye-detail-content{ padding-left:80px; padding-right:60px; }
  .ye-detail--img-left .ye-detail-content{ padding-right:80px; padding-left:60px; }
  .ye-weddingday .ye-detail-content{ padding-right: 40px; }
}
@media (max-width: 999px){
  .ye-detail{ display:flex; flex-direction:column; min-height:0; }
  .ye-detail-media{ position:relative; order:-1; min-height: 280px; }
  .ye-detail-content{ position:static; width:auto; order:1; padding: 40px var(--gutter-mobile); }
}

.ye-num{
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.2px;
  color: var(--c-gold);
  margin-bottom: 16px;
}
.ye-detail-content .h-display{ font-size: clamp(30px, 3.6vw, 40px); }
.ye-detail-content .h-script{ font-size: clamp(30px, 4vw, 44px); margin-top: 4px; }
.ye-detail-tagline{
  font-family: var(--font-serif-italic);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.35;
  color: var(--c-gold);
  margin-top: 14px;
  max-width: 560px;
}
.ye-weddingday .ye-detail-tagline,
.ye-special .ye-detail-tagline{ color: var(--c-gold-dark); }
.ye-weddingday .ye-detail-tagline{ font-size: clamp(20px, 2.4vw, 30px); }
.ye-special .ye-detail-tagline{ font-size: clamp(22px, 2.8vw, 40px); line-height: 1.1; }
.ye-detail-tagline--muted{
  color: rgba(253,250,246,.7);
  font-size: clamp(16px, 1.8vw, 20px);
}
.ye-detail-content .lede{ margin-top: 22px; max-width: 560px; }
.ye-detail-subhead{
  font-family: var(--font-serif-italic);
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  color: var(--c-gold);
  margin-top: 40px;
}
.ye-weddingday .ye-detail-subhead,
.ye-special .ye-detail-subhead{
  font-family: var(--font-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  color: var(--c-gold-dark);
}

.ye-bullets{
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  max-width: 620px;
}
@media (max-width: 560px){ .ye-bullets{ grid-template-columns: 1fr; } }
.ye-bullets li{
  position: relative;
  padding-left: 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-muted);
}
.ye-bullets li::before{
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  background: var(--c-gold);
}
.ye-bullets--bright li{ color: var(--c-cream-2); }
.ye-bullets--light li{
  font-weight: 300;
  color: var(--c-text);
}

.ye-detail-content > .btn-link{ margin-top: 40px; display: inline-flex; }

/* --- 08 · The Planning Process --- */
.ye-process-title{ color: var(--c-black); font-size: clamp(28px, 3.6vw, 48px); }
.ye-process .h-script{ font-size: clamp(28px, 4vw, 52px); margin-top: 8px; }
.ye-process-grid{
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
@media (max-width: 900px){ .ye-process-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ye-process-grid{ grid-template-columns: 1fr; } }
.ye-step{
  border-left: 1px solid rgba(201,168,76,.3);
  padding-left: 20px;
}
.ye-step .num{
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.2px;
  color: var(--c-gold);
  margin-bottom: 18px;
}
.ye-step h3{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  margin-bottom: 12px;
}
.ye-step p{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-text);
}

/* --- 09 · Closing CTA --- */
.ye-cta{
  position: relative;
  background-image: url("../assets/images/ye-cta-gradient.jpg");
  background-size: cover;
  background-position: center;
  padding: 80px 0;
}
.ye-cta-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 36px;
}
.ye-cta-heading{ flex: 1 1 320px; }
.ye-cta-line1{
  font-family: var(--font-serif-italic);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(34px, 5.4vw, 80px);
  line-height: 1.05;
  color: var(--c-black);
}
.ye-cta-line2{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 70px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-gold-pale);
  margin-top: 6px;
}
.ye-cta-body{ flex: 1 1 380px; max-width: 550px; }
.ye-cta-body p:not(.ye-cta-whatsapp){
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-black-2);
}
.ye-cta-btn.btn{
  margin-top: 26px;
  background: var(--c-black);
  color: var(--c-gold);
}
.ye-cta-whatsapp{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  color: var(--c-black-2);
  margin-top: 18px;
}

@media (max-width: 700px){
  .ye-cta-inner{ align-items: flex-start; }
  .ye-cta-btn.btn{ width: 100%; }
}

/* --- Desktop: exact Figma composition (absolute, pinned to the 1440×460 reference canvas) --- */
@media (min-width: 900px){
  .ye-cta{ aspect-ratio: 1440 / 460; padding: 0; }
  .ye-cta-inner, .ye-cta-heading, .ye-cta-body{ display: contents; }
  .ye-cta-line1, .ye-cta-line2, .ye-cta-body p, .ye-cta-btn.btn, .ye-cta-whatsapp{
    position: absolute;
    margin: 0;
    white-space: nowrap;
  }
  .ye-cta-line2{
    left: 7.85%; top: 35.2%;
    font-size: clamp(28px, 4.86vw, 70px);
  }
  .ye-cta-line1{
    left: 37.5%; top: 17.8%;
    font-size: clamp(30px, 5.56vw, 80px);
  }
  .ye-cta-body p:not(.ye-cta-whatsapp){
    left: 52.7%; top: 39.6%;
    width: 38.2%;
    white-space: normal;
    font-size: clamp(14px, 1.25vw, 18px);
  }
  .ye-cta-btn.btn{
    left: 38.2%; top: 68.9%;
    width: 23.6%;
    height: 12.2%;
    min-height: 44px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .ye-cta-whatsapp{
    left: 52.8%; top: 84.6%;
  }
}
.ye-cta-whatsapp a{ color:inherit; transition:color .2s ease; } .ye-cta-whatsapp a:hover{ color: var(--c-black); }