/* Wedding one-page site - Ombline & Gonzague, 29 May 2027 */

:root {
  /* Declaring both schemes tells the browsers' algorithmic dark modes (Chrome's
     Auto Dark Theme, Samsung Internet's force dark) that this page handles
     colour schemes itself, so they leave it alone instead of inverting cream
     into near-black and the orange into red. This stylesheet has no
     prefers-color-scheme rule, so the light palette below is what renders in
     both cases -- deliberately, the site is light only. `only light` is the
     newer opt-out keyword but the older "does the page support dark?" check,
     which is what Samsung Internet implements, does not honour it. */
  color-scheme: light dark;

  --cream: #FBF8F3;
  --cream-deep: #F3EDE3;
  --card: #FFFFFF;
  --teal: #0F6E75;         /* headings, links */
  --teal-dark: #1F3B40;    /* body text, photo frame */
  --teal-soft: #A9CBCE;    /* rules, timeline spine */
  --orange: #E8630A;       /* decorative accents only (fails AA as text on cream) */
  --orange-deep: #C4500A;  /* interactive backgrounds: 5.2:1 with white */
  --muted: #6B7F82;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-height: 56px;
  --page-max: 1000px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--cream);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--teal-dark);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

a { color: var(--teal); }

/* ---------- Sticky navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1rem;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--teal-soft);
  overflow-x: auto;              /* links scroll sideways on narrow screens */
  scrollbar-width: none;
  white-space: nowrap;
}

.nav::-webkit-scrollbar { display: none; }

.nav__brand {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.02em;
  text-decoration: none;
  flex: none;
}

.nav__links {
  display: flex;
  gap: 1.1rem;
  margin-left: auto;
  flex: none;
}

.nav__links a {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--teal-dark);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav__links a:hover,
.nav__links a:focus-visible { border-bottom-color: var(--orange); }

/* ---------- Hero ----------

   The cover photo is a portrait. On phones it fills the screen behind the text;
   on wide screens a full-bleed portrait would crop to a narrow band of huge
   faces, so it gets its own column beside the text instead.                  */

.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-height));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* text sits below the faces on phones */
  padding: 3rem 1.25rem 4.5rem;
  text-align: center;
  color: var(--cream);
  background:
    linear-gradient(rgba(31, 59, 64, 0.15), rgba(31, 59, 64, 0.75)),
    url("images/nous/au_mariage_d_ines.jpg") center 22% / cover no-repeat;
}

.hero__photo { display: none; }

.hero__names {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 11vw, 5rem);
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.hero__rule {
  width: 96px;
  height: 3px;
  margin: 1.4rem auto;
  background: var(--orange);
  border: 0;
}

.hero__date {
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0;
}

.hero__countdown {
  margin-top: 2.5rem;
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
}

.hero__countdown strong {
  font-weight: 600;
  color: #FFC08A;  /* light orange: readable on the dark overlay */
}

/* ---------- Sections ---------- */

.section {
  padding: 4.5rem 1.25rem;
  scroll-margin-top: var(--nav-height);
}

.section--tinted { background: var(--cream-deep); }

.section__inner {
  max-width: var(--page-max);
  margin: 0 auto;
}

.section__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  color: var(--teal);
  text-align: center;
  margin: 0;
}

.section__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 0.9rem auto 0;
  background: var(--orange);
}

.section__lead {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  text-align: center;
  color: var(--muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.65rem 1.3rem;
  border-radius: 2px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  text-decoration: none;
  background: var(--orange-deep);
  color: #FFFFFF;
  border: 1px solid var(--orange-deep);
}

.btn:hover, .btn:focus-visible { background: var(--orange); border-color: var(--orange); }

.btn--outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal-soft);
}

.btn--outline:hover, .btn--outline:focus-visible {
  background: var(--teal);
  border-color: var(--teal);
  color: #FFFFFF;
}

/* Reservation links we do not have yet: visibly inert, not clickable. */
.btn--pending {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--muted);
  cursor: not-allowed;
}

/* ---------- Timeline ---------- */

.timeline {
  max-width: 34rem;
  margin: 3rem auto 0;
  padding: 0 0 0 2.2rem;
  list-style: none;
  border-left: 2px solid var(--teal-soft);
}

.timeline__item { position: relative; padding-bottom: 2.5rem; }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-2.2rem - 7px);
  top: 0.45rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
}

.timeline__time {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--teal);
  line-height: 1.2;
}

.timeline__what { font-weight: 600; }
.timeline__where { color: var(--muted); font-size: 0.95rem; }

.center { text-align: center; }
.mt-2 { margin-top: 2.5rem; }

/* ---------- Cards ---------- */

.cards {
  display: grid;
  gap: 1.75rem;
  margin-top: 3rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--teal-soft);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card__photo {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.card__title {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--teal);
  margin: 0;
  line-height: 1.2;
}

.card__address { color: var(--muted); font-size: 0.95rem; margin: 0; }

.card__rate {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--teal-dark);
}

.card__actions { margin-top: auto; padding-top: 0.8rem; }

/* Placeholder text to be replaced once the negotiated rates are confirmed. */
.placeholder {
  background: #FDEBD8;
  border-bottom: 1px dashed var(--orange);
  padding: 0 0.25rem;
}

/* ---------- Decorative banner ---------- */

.banner {
  height: clamp(180px, 32vw, 340px);
  background: url("images/lieux/bassin_arcachon.jpg") center 60% / cover no-repeat;
}

/* ---------- Practical info ---------- */

.info-list {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

.info-list li {
  padding-left: 1.4rem;
  border-left: 3px solid var(--orange);
}

.info-list strong { display: block; color: var(--teal); font-family: var(--serif); font-size: 1.25rem; }

/* ---------- Carousel (CSS only) ---------- */

.carousel {
  position: relative;
  max-width: 720px;
  margin: 3rem auto 0;
  aspect-ratio: 4 / 3;
  background: var(--teal-dark);
  border-radius: 3px;
  overflow: hidden;
}

.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover: the photos mix portrait and landscape, cropping would cut faces */
  object-fit: contain;
  opacity: 0;
  animation: carousel-fade 25s linear infinite;
}

.carousel img:nth-child(1) { animation-delay: 0s; }
.carousel img:nth-child(2) { animation-delay: 5s; }
.carousel img:nth-child(3) { animation-delay: 10s; }
.carousel img:nth-child(4) { animation-delay: 15s; }
.carousel img:nth-child(5) { animation-delay: 20s; }

@keyframes carousel-fade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  20%  { opacity: 1; }
  23%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel img { animation: none; }
  .carousel img:nth-child(1) { opacity: 1; }
}

/* ---------- Footer ---------- */

.footer {
  padding: 3rem 1.25rem;
  text-align: center;
  background: var(--teal-dark);
  color: var(--cream);
}

.footer__names { font-family: var(--serif); font-size: 1.8rem; margin: 0 0 0.3rem; }
.footer__date { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.18em; margin: 0; opacity: 0.8; }

/* ---------- Wide screens ---------- */

@media (min-width: 760px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 42%);
    padding: 0;
    background: var(--cream);
    color: var(--teal-dark);
  }

  .hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem clamp(2rem, 5vw, 4.5rem);
  }

  .hero__photo {
    display: block;
    background: url("images/nous/au_mariage_d_ines.jpg") center 30% / cover no-repeat;
  }

  .hero__names { color: var(--teal); text-shadow: none; }
  .hero__rule { margin-left: 0; margin-right: 0; }
  .hero__text { text-align: left; }
  .hero__countdown strong { color: var(--orange-deep); }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .card__photo { height: 240px; }
  .section { padding: 6rem 2rem; }
}

/* ---------- Narrow phones: fit the six nav links without sideways scrolling ---------- */

@media (max-width: 480px) {
  .nav { gap: 0; padding: 0 0.75rem; }
  .nav__brand { display: none; }
  .nav__links { gap: 0.8rem; margin-left: 0; }
  .nav__links a { font-size: 0.7rem; letter-spacing: 0.06em; }
}

/* Square frame on phones: the mix of portrait and landscape photos letterboxes
   less in 1:1 than in 4:3. */
@media (max-width: 759px) {
  .carousel { aspect-ratio: 1 / 1; }
}