/* Weddings page, v2. Mobile first, tokens only. */

/* ---------- Hero ---------- */
/* Phones: the photo stands alone on top, the words sit below it on the light ground, so nothing covers the picture */
.page-hero { display: block; min-height: 0; background: var(--c-fog); color: var(--c-ink); overflow: visible; }
.page-hero__img { position: relative; inset: auto; height: 54svh; min-height: 340px; }
.page-hero__img img { object-position: 58% center; }
.page-hero__img::after { background: linear-gradient(180deg, rgba(20, 38, 29, 0.38) 0%, rgba(20, 38, 29, 0) 28%); }
.page-hero__copy { padding-block: var(--s-7) var(--s-8); }
.page-hero__copy h1, .page-hero__copy .lead { text-shadow: none; }
.page-hero__copy h1 { font-size: clamp(2rem, 3vw + 1rem, 3.4rem); max-width: 18ch; color: var(--c-lodgepole); }
.page-hero__copy .lead { color: var(--c-ink-soft); }
.page-hero .btn--accent { --btn-bg: var(--c-pine); --btn-fg: var(--c-paper); }
.hero-ctas { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.hero-ctas .btn { width: 100%; }
.hero-ctas .link { justify-self: center; padding-block: var(--s-2); }
@media (min-width: 760px) {
  .page-hero { display: grid; min-height: 72svh; color: var(--c-paper); overflow: hidden; background: var(--c-lodgepole); }
  .page-hero__img { position: absolute; inset: 0; height: auto; min-height: 0; }
  .page-hero__img::after { background: linear-gradient(180deg, rgba(20, 38, 29, 0.3) 0%, rgba(20, 38, 29, 0) 24%, rgba(20, 38, 29, 0) 45%, rgba(20, 38, 29, 0.66) 100%); }
  .page-hero__copy { padding-block: var(--s-10) var(--s-9); }
  .page-hero__copy h1, .page-hero__copy .lead { text-shadow: 0 1px 24px rgba(20, 38, 29, 0.45); }
  .page-hero__copy h1 { color: var(--c-paper); }
  .page-hero__copy h1 .rise { display: block; }
  .page-hero__copy .lead { color: var(--c-fog); }
  .page-hero .btn--accent { --btn-bg: var(--c-paper); --btn-fg: var(--c-pine); }
  .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
  .hero-ctas .btn { width: auto; }
  .hero-ctas .link { color: var(--c-paper); text-decoration-color: rgba(248, 249, 245, 0.5); }
}
@media (min-width: 1024px) { .page-hero__img img { object-position: center 55%; } }

/* Headline and copy rise on load */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise var(--d-edit) var(--ease-fluid) both; }
  h1 .rise:nth-child(2) { animation-delay: 90ms; }
  .lead.rise { animation-delay: 180ms; }
  .hero-ctas.rise { animation-delay: 270ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- Package cards with photos ---------- */
.pkg { position: relative; overflow: hidden; }
.pkg__photo { margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-linen); }
.pkg__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-edit-long) var(--ease-out); }
@media (hover: hover) {
  .pkg { transition: box-shadow var(--d-ui-slow) var(--ease-out), transform var(--d-ui-slow) var(--ease-out); }
  .pkg:hover { box-shadow: var(--e-hover); }
  .pkg:hover .pkg__photo img { transform: scale(1.05); }
}
/* The featured card stays light: a soft slate outline instead of a dark block */
.pkg--feature { background: var(--c-paper); color: var(--c-ink); box-shadow: 0 0 0 1.5px var(--c-slate-soft), var(--e-rest); }
.pkg--feature .pkg__fit, .pkg--feature .pkg__price small { color: var(--c-ink-soft); }
.pkg--feature li::before { background: var(--c-moss); }
.pkg--feature .tag { background: var(--c-mist); color: var(--c-slate); }

/* ---------- Comparison (shared [data-compare] component lives in base.css) ---------- */
.compare__how { margin-block: var(--s-6) var(--s-5); max-width: var(--w-text); color: var(--c-ink-soft); }
.compare__how strong { color: var(--c-lodgepole); font-weight: 600; }
.pkg__name small { display: block; margin-top: var(--s-1); font-family: var(--f-body); font-size: var(--t-small); font-weight: 400; color: var(--c-ink-soft); }

/* ---------- Add-ons ---------- */
.addons { margin-top: var(--s-7); padding: var(--s-5); background: var(--c-linen); border-radius: var(--r-md); max-width: var(--w-text); }
.addons h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.addons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); color: var(--c-ink-soft); font-size: var(--t-small); }
.addons strong { color: var(--c-lodgepole); font-weight: 600; }

/* ---------- Montana Legacy timeline (the one pine section) ---------- */
.legacy__layout { display: grid; gap: var(--s-7); }
.legacy__photo { aspect-ratio: 4 / 3; margin: 0; border-radius: var(--r-md); }
.legacy__photo img { object-position: center 38%; }
.timeline { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: grid; gap: var(--s-6); }
.timeline li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4); }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: calc(-1 * var(--s-6) + var(--s-1)); width: 1px; background: rgba(255, 255, 255, 0.3); }
.timeline__day { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-pill); border: 1.5px solid var(--c-lantern); color: var(--c-lantern); font-family: var(--f-display); font-size: var(--t-h3); }
.timeline h3 { font-size: var(--t-h3); color: var(--c-paper); }
.timeline p { color: var(--c-lichen); margin-top: var(--s-1); }
@media (min-width: 1024px) {
  .legacy__layout { grid-template-columns: 5fr 6fr; gap: var(--s-10); align-items: center; }
  .legacy__photo { aspect-ratio: 4 / 5; }
}

/* ---------- Details mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: var(--s-3); }
.mosaic__tile { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-linen); min-height: 0; }
.mosaic__tile .zoom { width: 100%; height: 100%; transition: transform var(--d-edit-long) var(--ease-out); }
.mosaic__tile img { width: 100%; height: 100%; object-fit: cover; }
.mosaic__a { grid-area: 1 / 1 / 3 / 2; }
.mosaic__c { grid-area: 1 / 2 / 3 / 3; }
.mosaic__b { grid-area: 3 / 1 / 4 / 3; }
.mosaic__d { grid-area: 4 / 1 / 6 / 2; }
.mosaic__e { grid-area: 4 / 2 / 6 / 3; }
.mosaic__b img { object-position: center 40%; }
.js .mosaic__b img { transition-delay: 90ms; }
.js .mosaic__c img { transition-delay: 180ms; }
.js .mosaic__d img { transition-delay: 270ms; }
.js .mosaic__e img { transition-delay: 360ms; }
@media (hover: hover) { .mosaic__tile:hover .zoom { transform: scale(1.05); } }
@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: var(--s-4); }
  .mosaic__a { grid-area: 1 / 1 / 3 / 2; }
  .mosaic__b { grid-area: 1 / 2 / 2 / 4; }
  .mosaic__c { grid-area: 1 / 4 / 3 / 5; }
  .mosaic__d { grid-area: 2 / 2 / 3 / 3; }
  .mosaic__e { grid-area: 2 / 3 / 3 / 4; }
}
@media (min-width: 1024px) { .mosaic { grid-auto-rows: 260px; } }

/* ---------- Included ---------- */
.incl__layout { display: grid; gap: var(--s-7); }
.incl__photo { aspect-ratio: 4 / 3; margin: 0; border-radius: var(--r-md); }
.incl__photo img { object-position: center 30%; }
.incl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.incl__item { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; }
.incl__item svg { width: 40px; height: 40px; padding: var(--s-2); color: var(--c-slate); background: var(--c-paper); border-radius: var(--r-sm); box-shadow: var(--e-rest); }
.incl__item h3 { font-family: var(--f-body); font-size: var(--t-body); font-weight: 600; line-height: 1.3; }
.incl__item p { color: var(--c-ink-soft); font-size: var(--t-small); margin-top: var(--s-1); }
@media (min-width: 760px) { .incl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); } }
@media (min-width: 1024px) {
  .incl__layout { grid-template-columns: 4fr 7fr; gap: var(--s-10); align-items: center; }
  .incl__photo { aspect-ratio: 3 / 4; }
}

/* ---------- Events ---------- */
.events__layout { display: grid; gap: var(--s-5); }
.events .section-head { margin-bottom: 0; }
.events__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.events__list li { padding-block: var(--s-3); border-bottom: 1px solid var(--c-rule); }
.events__list li:first-child { border-top: 1px solid var(--c-rule); }
@media (min-width: 760px) {
  .events__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
  .events__list li:nth-child(2) { border-top: 1px solid var(--c-rule); }
}
@media (min-width: 1024px) {
  .events__layout { grid-template-columns: 1fr 1fr; column-gap: var(--s-10); align-items: start; }
  .events__list, .events__cta { grid-column: 2; }
  .events .section-head { grid-column: 1; grid-row: 1 / span 2; }
}

/* ---------- FAQ ---------- */
.faq-phone { font-family: var(--f-display); font-size: var(--t-h3); }
.faq-photo { aspect-ratio: 4 / 3; margin-top: var(--s-3); border-radius: var(--r-md); display: none; }
.faq-photo img { object-position: center 78%; }
@media (min-width: 1024px) { .faq-photo { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .pkg, .pkg__photo img, .mosaic__tile .zoom { transition: none; }
}