/* ------------------------------------------------------------------ */
/*  Fonts — ITC Avant Garde Gothic Pro                                */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "ITC Avant Garde Gothic Pro";
  src: url("/ITC Avant Garde Gothic Pro Extra Light.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ITC Avant Garde Gothic Pro";
  src: url("/ITC Avant Garde Gothic Pro Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ITC Avant Garde Gothic Pro";
  src: url("/ITC Avant Garde Gothic Pro Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ITC Avant Garde Gothic Pro";
  src: url("/ITC Avant Garde Gothic Pro Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/*  Base                                                              */
/* ------------------------------------------------------------------ */

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

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-family: "ITC Avant Garde Gothic Pro", "Avant Garde", "Century Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/*  Affiche container — ratio 1200 × 628                                */
/* ------------------------------------------------------------------ */

.affiche {
  position: relative;
  width: min(100%, 1200px);
  aspect-ratio: 1200 / 628;
  overflow: hidden;
  color: #222036;
  letter-spacing: 0.04em;
  container-type: inline-size;
  container-name: affiche;
}

.affiche__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.affiche__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Font weight helpers */
.fw-light  { font-weight: 200; }
.fw-book   { font-weight: 400; }
.fw-bold   { font-weight: 700; }

/* Horizontal rules */
.rule {
  border: none;
  height: 4px;
  background: #222036;
  margin-inline: auto;
}

.concert-label.fw-light.big {
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  letter-spacing: 2px;
}

/* ------------------------------------------------------------------ */
/*  Desktop layout (≥ 641 px)                                           */
/* ------------------------------------------------------------------ */

.block-date--mobile {
  display: none;
}

/* Date — upper-left column */
.block-date--desktop {
  position: absolute;
  top: 8%;
  left: 3.5%;
  width: 21%;
  text-align: center;
  line-height: 1.15;
}

.block-date--desktop .date-line {
  font-size: clamp(0.75rem, 2.05vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.fw-book.big {
  font-size: 1.8em;
}

.block-date--desktop .date-day {
  font-size: clamp(1.8rem, 5.8vw, 4.4rem);
  line-height: 0.8;
  margin: 0.15em 0 0 0;
  letter-spacing: 0.02em;
}

.block-date--desktop .rule--date {
  width: 72%;
  height: 4px;
  margin-block: 0.45em 0.35em;
  margin-bottom: .85em;
}

.block-date--desktop .date-time {
  font-size: clamp(1.4rem, 4.5vw, 3.4rem);
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Right column — concert + orgue aligned */
.block-right--desktop {
  position: absolute;
  inset: 7% 14% 6.5% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: max-content;
  max-width: 58%;
}

/* Concert — top of right column */
.block-concert {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.12;
}

.block-concert .concert-label {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  letter-spacing: 0.12em;
  margin-bottom: 0.08em;
}

.block-concert .concert-name {
  font-size: clamp(2.4rem, 7vw, 5.35rem);
  letter-spacing: 0.055em;
  line-height: 1.02;
}

.concert-name.fw-bold.space {
  letter-spacing: 0.115em;
}

.block-concert .concert-sub {
  font-size: clamp(0.67rem, 1.75vw, 1.33rem);
  letter-spacing: 0.12em;
  margin-top: 0.35em;
}

/* Hidden on desktop — shown inside .block-concert on mobile */
.block-concert .rule--concert-mobile,
.block-concert .concert-orgue {
  display: none;
}

/* Orgue — bottom of right column */
.block-orgue--desktop {
  text-align: center;
  margin-top: 1em;
}

.block-orgue--desktop .rule--orgue {
  width: 42%;
  margin-bottom: .5em;
}

.block-orgue--desktop .concert-orgue {
  font-size: clamp(1.5rem, 1.3vw, 3rem);
  letter-spacing: 0;
}

/* Location — bottom-left in white circle */
.block-location {
  position: absolute;
  bottom: 5.5%;
  left: 4.6%;
  width: 29%;
  text-align: center;
  line-height: 1.25;
}

.block-location .location-line {
  font-size: clamp(0.55rem, 1.35vw, 1rem);
  letter-spacing: 0.1em;
}

.block-location .location-name {
  font-size: clamp(0.72rem, 1.7vw, 1.28rem);
  letter-spacing: 0.08em;
  margin-block: 0.15em;
}

/* ------------------------------------------------------------------ */
/*  Mobile layout (affiche ≤ 640 px) — tout centré                     */
/* ------------------------------------------------------------------ */

@container affiche (max-width: 640px) {
  .affiche {
    aspect-ratio: 9 / 16;
    max-width: 420px;
  }

  .affiche__bg {
    object-position: 42% center;
  }

  .block-date--desktop,
  .block-right--desktop,
  .block-concert,
  .block-location,
  .block-orgue--desktop {
    position: static;
    width: 100%;
  }

  .block-right--desktop {
    inset: auto;
    max-width: none;
    display: contents;
  }

  .block-orgue--desktop {
    display: none;
  }

  .block-concert .rule--concert-mobile,
  .block-concert .concert-orgue {
    display: block;
  }

  .affiche__overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 6% 5% 5%;
    text-align: center;
  }

  /* Date inline */
  .block-date--mobile {
    display: block;
    flex-shrink: 0;
  }

  .block-date--desktop {
    display: none;
  }

  .date-inline {
    font-size: clamp(.6rem, 5vw, 1.3rem);
    letter-spacing: 0.1em;
    line-height: 1.3;
  }
  
  .rule--date--mobile {
    width: 42%;
    margin-block: 0.6em 0.5em;
  }


  /* Concert block — centred stack */
  .block-concert {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    padding-block: 0.5em;
  }

  .block-concert .concert-label {
    font-size: clamp(0.8rem, 7vw, 4rem);
    letter-spacing: 0.05em;
  }

  .concert-label.fw-light.big {
    font-size: clamp(1rem, 10vw, 5rem);
  }
  
  .block-concert .concert-name {
    font-size: clamp(1.1rem, 8.5vw, 5rem);
    letter-spacing: 0.09em;
  }

  .block-concert .concert-sub {
    font-size: clamp(0.5rem, 4vw, .8rem);
    letter-spacing: 0.12em;
  }

  .block-concert .rule--concert-mobile {
    width: 42%;
    margin-block: 0.6em 0.5em;
  }

  .block-concert .concert-orgue {
    font-size: clamp(0.75rem, 4vw, 1.1rem);
    letter-spacing: 0.14em;
  }

  /* Location — bottom centred */
  .block-location {
    flex-shrink: 0;
    padding-bottom: 5.2em;
  }

  .block-location .location-line {
    font-size: clamp(0.42rem, 4vw, .9rem);
    letter-spacing: 0.08em;
  }

  .block-location .location-name {
    font-size: clamp(0.5rem, 5vw, 1.05rem);
    letter-spacing: 0.06em;
  }
}

@media (max-width: 680px) {
  .page {
    padding: 0.5rem;
  }

  .affiche {
    aspect-ratio: 9 / 16;
    max-width: min(420px, 100%);
  }
}