/* save-the-date/styles.css
 *
 * Färgtokens och layout för den fristående save-the-date-sidan.
 * INTE delad med planeringsappens stylesheets — sidan ska kunna
 * utvecklas och deployas oberoende. */

:root {
  --bg: #fbf6f1;
  --surface: #f1e9dc;
  --border-soft: #d8cfbd;
  --sage: #a8a489;
  --plum: #8a5d63;
  --ink-heading: #71563c;
  --ink: #4a3f38;
  --ink-muted: #85625c;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  line-height: 1.5;
  min-height: 100dvh;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem 1.25rem;
  gap: 1.75rem;
}

/* Kortet — begränsat på desktop, fyller bredden på mobil upp till taket. */
.card {
  width: 100%;
  max-width: min(92vw, 640px);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  box-shadow: 0 12px 40px rgba(74, 63, 56, 0.18);
}

.card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/*
 * Nedräkning — visuellt språk avläst från planeringsappens gäst-hero
 * (src/modules/info/components/Cover.tsx/.css, AO7): Cormorant
 * Garamond italic serif vikt 300, tabular-nums för jämn siffer-
 * bredd. Ingen delad kod — bara samma mönster återskapat i egen CSS
 * med våra egna färgtokens.
 *
 * AO8: från fem separata celler till en enda löptext-fras — layouten
 * förenklad till en centrerad paragraf som får radbryta fritt på
 * smala skärmar.
 */
.countdown {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0.9rem clamp(1.25rem, 6vw, 2.5rem);
  width: auto;
  max-width: 100%;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* Nedräkningen tillfälligt gömd — beställaren ogillade utseendet.
 * Koden (HTML/JS/CSS ovan) lämnad orörd; ta bort denna regel för att
 * visa den igen. */
.countdown {
  display: none;
}

.countdown__loading {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-muted);
}

.countdown__phrase {
  margin: 0;
  max-width: 28ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  line-height: 1.25;
  color: var(--ink-heading);
  text-align: center;
}

/* Ensam-läge (bröllopsdagen passerad) — ett enda stilrent blickfång.
 * Ärver samma diskreta ram från .countdown, bara layoutriktningen
 * ändras. */
.countdown--single {
  flex-direction: column;
  gap: 0.5rem;
}

.countdown--single .countdown__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 500;
  color: var(--ink-heading);
  text-align: center;
}