/* Shared content grid below the agenda ribbon. The hero, header, quick facts
   and agenda retain their existing layout. At desktop widths, the right
   column begins at 50% of the viewport plus half the common gutter. */
:root {
  --aiki-content-gutter: clamp(32px, 3.3333333333vw, 64px);
  --aiki-content-columns: repeat(2, minmax(0, 1fr));
}

.public-site :is(
  .day-head,
  .art-section,
  .taste-section,
  .sunsets-section,
  .route-section,
  .contacts-top
) {
  grid-template-columns: var(--aiki-content-columns);
  column-gap: var(--aiki-content-gutter);
}

.public-site :is(.day-section, .art-section, .taste-section, .sunsets-section, .route-section, .contacts-section) {
  padding-inline: var(--pad);
}

.public-site .day-head > p {
  justify-self: start;
  width: 100%;
  max-width: none;
}
.public-site .taste-intro { padding-inline-end: 0; }
.public-site :is(.art-statement, .sunsets-copy, .taste-photo) {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.public-site :is(.place-copy > p, .events-copy > p, .sunsets-copy > p) {
  width: 100%;
  max-width: none;
}

/* Full-bleed photographs end at the centre, while their text uses the same
   right-column start and outside margin as the inset sections. */
.public-site :is(.place-section, .events-section) {
  grid-template-columns: var(--aiki-content-columns);
  column-gap: var(--aiki-content-gutter);
  padding-inline: var(--pad);
}
.public-site :is(.place-copy, .events-copy) {
  min-width: 0;
  padding-inline: 0;
}
.public-site :is(.place-photo, .events-image) {
  min-width: 0;
  margin-inline-start: calc(-1 * var(--pad));
  margin-inline-end: calc(var(--aiki-content-gutter) / -2);
}

/* The two coloured cards retain their full-width backgrounds. Their inner
   content follows the same two-column grid as the surrounding sections. */
.public-site .occasion-section {
  grid-template-columns: var(--aiki-content-columns);
}

/* The right half splits into two smaller modules for contact information
   and footer links. Column three shares the main right-column guide. */
.public-site :is(.contacts-grid, .site-footer) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--aiki-content-gutter);
}
.public-site .contacts-grid > div:first-child,
.public-site .site-footer > .brand {
  grid-column: 1 / span 2;
}
.public-site .contacts-grid > div:nth-child(2),
.public-site .site-footer > p:first-of-type {
  grid-column: 3;
}
.public-site .contacts-grid > div:nth-child(3),
.public-site .site-footer > .site-footer__legal {
  grid-column: 4;
}
.public-site .site-footer > .site-footer__legal { text-align: left; }
.public-site .contacts-top > .button { justify-self: start; }

@media (min-width: 981px) {
  .public-site .occasion-card:first-child {
    padding-inline: var(--pad) calc(var(--aiki-content-gutter) / 2);
  }
  .public-site .occasion-card:last-child {
    padding-inline: calc(var(--aiki-content-gutter) / 2) var(--pad);
  }

  /* Hanging step numbers sit in the gutter, so the instructions themselves
     align with the text and photo above them. */
  .public-site :is(.route-steps, .sunset-steps) > li {
    position: relative;
    display: block;
  }
  .public-site :is(.route-steps, .sunset-steps) > li > span {
    position: absolute;
    inset-inline-end: calc(100% + var(--aiki-content-gutter) / 4);
    width: calc(var(--aiki-content-gutter) / 2);
    text-align: left;
  }
  .public-site .route-steps > li > span { inset-block-start: 28px; }
  .public-site .sunset-steps > li > span { inset-block-start: 15px; }
}

@media (max-width: 980px) {
  :root { --aiki-content-columns: minmax(0, 1fr); }

  .public-site :is(.day-head, .art-section, .taste-section, .sunsets-section, .route-section, .contacts-top) {
    row-gap: 36px;
  }
  .public-site :is(.place-photo, .events-image) {
    margin-inline: calc(-1 * var(--pad));
  }
  .public-site .occasion-card { padding-inline: var(--pad); }
  .public-site :is(.contacts-grid, .site-footer) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  .public-site .contacts-grid > div:first-child { grid-column: 1 / -1; }
  .public-site .contacts-grid > div:nth-child(2),
  .public-site .site-footer > .brand { grid-column: 1; }
  .public-site .contacts-grid > div:nth-child(3),
  .public-site .site-footer > p:first-of-type,
  .public-site .site-footer > .site-footer__legal { grid-column: 2; }
}

@media (max-width: 720px) {
  .public-site :is(.contacts-grid, .site-footer) {
    grid-template-columns: minmax(0, 1fr);
  }
  .public-site .contacts-grid > div:first-child,
  .public-site .contacts-grid > div:nth-child(2),
  .public-site .contacts-grid > div:nth-child(3),
  .public-site .site-footer > .brand,
  .public-site .site-footer > p:first-of-type,
  .public-site .site-footer > .site-footer__legal { grid-column: 1 / -1; }
}