/*
 * Headline layout of the themed guest page: per-headline fonts, sizes, spacing,
 * alignment and date position (see GuestTheme).
 */
@layer components {
  .guest-theme {
    --theme-date-scale: 1;
    --theme-headline-gap: 2rem;
    --theme-top-space: 2rem;

    --font-fraunces: "Fraunces Variable", ui-serif, Georgia, serif;
    --font-playfair: "Playfair Display Variable", ui-serif, Georgia, serif;
    --font-inter: var(--font-sans);
    --font-bricolage: "Bricolage Grotesque Variable", var(--font-sans);
    --font-caveat: "Caveat Variable", cursive;
    --font-welcome: var(--font-display);

    & .guest-event__header {
      padding-block: var(--theme-top-space) 0;

      & .eyebrow {
        font-size: calc(var(--step--1) * var(--theme-date-scale));
      }
    }

    /* The article is a stack with a gap of --space-m; adjust from there. */
    & .guest-event__header + .guest-event__welcome {
      margin-block-start: calc(var(--theme-headline-gap) - var(--space-m));
    }

    & .guest-event__welcome {
      font-family: var(--font-welcome);
    }
  }

  /* Font of the welcome message */
  .guest-theme[data-theme-welcome-font="fraunces"] { --font-welcome: var(--font-fraunces); }
  .guest-theme[data-theme-welcome-font="playfair"] { --font-welcome: var(--font-playfair); }
  .guest-theme[data-theme-welcome-font="inter"] { --font-welcome: var(--font-inter); }
  .guest-theme[data-theme-welcome-font="bricolage"] { --font-welcome: var(--font-bricolage); }
  .guest-theme[data-theme-welcome-font="caveat"] { --font-welcome: var(--font-caveat); }

  /* Only the serifs have a real italic; the others would get a synthetic slant. */
  .guest-theme:is([data-theme-welcome-font="inter"], [data-theme-welcome-font="bricolage"], [data-theme-welcome-font="caveat"]) .guest-event__welcome {
    font-style: normal;
  }

  /* Alignment of date, title and welcome message */
  .guest-theme[data-theme-align="left"] :is(.guest-event__header, .guest-event__welcome) {
    justify-items: start;
    text-align: start;

    & p { margin-inline: 0; }
  }

  .guest-theme[data-theme-align="right"] :is(.guest-event__header, .guest-event__welcome) {
    justify-items: end;
    text-align: end;

    & p { margin-inline: auto 0; }
  }

  /* Date above or below the title, or hidden */
  .guest-theme[data-theme-date="below"] .guest-event__header .eyebrow { order: 1; }
  .guest-theme[data-theme-date="hidden"] .guest-event__header .eyebrow { display: none; }
}