/* ==========================================================================
   The Karims — coming-soon page layout
   --------------------------------------------------------------------------
   Page-specific only. Everything reusable (colour, type, buttons, divider,
   animation) lives in css/base.css. Load base.css first.
   ========================================================================== */

/* Centre a single short column in the viewport, with breathing room on all
   sides so the framed border never crowds the text. */
.page {
  flex: 1; /* fills the body column so the invitation sits optically centred */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
}

.invite {
  width: 100%;
  max-width: 33rem;
  text-align: center;
}

/* Vertical rhythm between the blocks of the invitation. */
.invite > * + * {
  margin-top: var(--space-md);
}

.invite__names {
  margin-top: var(--space-sm);
}

.invite__divider {
  margin-top: var(--space-lg);
}

.invite__lede {
  margin-top: var(--space-lg);
}

/*  Date / venue placeholder block — see the TODO in index.html.
    Styles are ready so the block only needs uncommenting once details are set. */
.invite__details {
  margin-top: var(--space-lg);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

.invite__details dt {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-indent: var(--tracking-wide);
  color: var(--c-gold-deep);
}

.invite__details dd {
  margin: 0.35rem 0 var(--space-md);
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.invite__details dd:last-of-type {
  margin-bottom: 0;
}

/* The wedding / RSVP note and its disabled placeholder button. */
.invite__wedding {
  margin-top: var(--space-xl);
}

.invite__cta {
  margin-top: var(--space-md);
}

.invite__hint {
  margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Names: stacked on the narrowest phones, on one line once there's room.
   -------------------------------------------------------------------------- */
.invite__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.25em;
}

@media (max-width: 22em) {
  .invite__names {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Roomier composition on tablet and up.
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .page {
    padding: var(--space-xl) var(--space-lg);
  }

  .invite__wedding {
    margin-top: calc(var(--space-xl) * 1.15);
  }
}