/* =========================================================
   FYAH MAWI — SHARED VISUAL SYSTEM
   Foundations and route-scoped responsive harmonisation.
   ========================================================= */

:root {
  /* Layout */
  --fm-shell-wide: 90rem;
  --fm-shell-content: 74rem;
  --fm-shell-reading: 48rem;

  --fm-gutter-desktop: 1.5rem;
  --fm-gutter-mobile: 1rem;

  /* Rhythm */
  --fm-space-1: 0.5rem;
  --fm-space-2: 0.75rem;
  --fm-space-3: 1rem;
  --fm-space-4: 1.5rem;
  --fm-space-5: 2rem;
  --fm-space-6: 3rem;
  --fm-space-7: 4rem;
  --fm-space-8: 6rem;

  --fm-section-space:
    clamp(var(--fm-space-6), 7vw, var(--fm-space-8));

  /* Colour */
  --fm-bg: #070807;
  --fm-panel: #0b0c0b;
  --fm-panel-raised: #101110;

  --fm-text: #f3f1ec;
  --fm-text-soft: rgba(255, 255, 255, 0.78);
  --fm-text-muted: rgba(255, 255, 255, 0.58);

  --fm-gold: #d9aa26;
  --fm-green: #4c8f2f;
  --fm-red: #c9362d;

  /* Borders */
  --fm-line: rgba(255, 255, 255, 0.11);
  --fm-line-soft: rgba(255, 255, 255, 0.075);
  --fm-line-accent: rgba(217, 170, 38, 0.46);

  /* Controls */
  --fm-control-height: 3rem;

  /* Typography */
  --fm-heading-display:
    clamp(3.75rem, 8vw, 7rem);

  --fm-heading-page:
    clamp(3rem, 7vw, 6rem);

  --fm-heading-section:
    clamp(2.25rem, 4.5vw, 4rem);

  --fm-body-large:
    clamp(1rem, 1.4vw, 1.15rem);
}

/* ---------------------------------------------------------
   Safe foundations only
   --------------------------------------------------------- */

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

html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--fm-bg);
  color: var(--fm-text);
}

:where(img, picture, video, iframe, svg) {
  max-width: 100%;
}

:where(img, picture, video) {
  display: block;
}

:where(
  .site-shell a,
  .site-shell button,
  .site-shell input,
  .site-shell select,
  .site-shell textarea
) {
  font: inherit;
}

.site-shell,
.main-content {
  width: 100%;
  min-width: 0;
}

.main-content {
  overflow: clip;
}

/* ---------------------------------------------------------
   Shared container system
   --------------------------------------------------------- */

.fm-container-wide {
  width:
    min(
      var(--fm-shell-wide),
      calc(100% - (var(--fm-gutter-desktop) * 2))
    );
  margin-inline: auto;
}

.fm-container-content {
  width:
    min(
      var(--fm-shell-content),
      calc(100% - (var(--fm-gutter-desktop) * 2))
    );
  margin-inline: auto;
}

.fm-container-reading {
  width:
    min(
      var(--fm-shell-reading),
      calc(100% - (var(--fm-gutter-desktop) * 2))
    );
  margin-inline: auto;
}

/*
 * Existing production node shells.
 * These now share one content edge and vertical rhythm.
 */
.fm-gallery-entry,
.fm-event-entry,
.fm-video-entry,
.fm-epk,
.fm-join {
  width:
    min(
      var(--fm-shell-content),
      calc(100% - (var(--fm-gutter-desktop) * 2))
    );
  max-width: none;
  margin-inline: auto;
  padding-block: var(--fm-section-space);
}

/* Artist has its own cinematic sections but shares outer alignment. */
.fm-artist-page {
  width: 100%;
  min-width: 0;
}

.fm-artist-page > section > *,
.fm-artist-section > * {
  min-width: 0;
}

/* ---------------------------------------------------------
   Shared typography hierarchy
   --------------------------------------------------------- */

.fm-gallery-entry__title,
.fm-event-entry__title,
.fm-video-entry__title,
.fm-epk__hero h1 {
  margin-top: 0;
  color: var(--fm-text);
  font-size: var(--fm-heading-page);
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.fm-gallery-entry__section-header h2,
.fm-event-entry h2,
.fm-video-entry h2,
.fm-epk__section-header h2,
.fm-join h1 {
  color: var(--fm-text);
  text-wrap: balance;
}

.fm-gallery-entry__story,
.fm-event-entry__description,
.fm-video-entry__description,
.fm-epk__prose,
.fm-join__lead {
  color: var(--fm-text-soft);
  font-size: var(--fm-body-large);
  line-height: 1.75;
}

.fm-gallery-entry__eyebrow,
.fm-event-entry__eyebrow,
.fm-video-entry__eyebrow,
.fm-epk__eyebrow,
.fm-join__eyebrow {
  color: var(--fm-gold);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   Unified border and surface language
   --------------------------------------------------------- */

.fm-gallery-card,
.event-card,
.video-card,
.product-card,
.fm-gallery-entry__lead,
.fm-gallery-entry__images .field__item,
.fm-event-entry__details,
.fm-video-entry__player,
.fm-video-entry__actions,
.fm-epk__hero-media,
.fm-epk__photo-grid > div > div,
.fm-join__form {
  border: 1px solid var(--fm-line);
  border-radius: 0;
  background-color: var(--fm-panel);
}

/* Remove inherited radii from ordinary content images. */
.fm-gallery-card img,
.event-card img,
.video-card img,
.product-card img,
.fm-gallery-entry img,
.fm-event-entry img,
.fm-video-entry img,
.fm-epk img {
  border-radius: 0;
}

/* ---------------------------------------------------------
   Buttons and links
   --------------------------------------------------------- */

.fm-btn,
.fm-epk__button,
.fm-gallery-entry__back,
.fm-event-entry__back,
.fm-video-entry__back,
.fm-video-entry__youtube,
.fm-video-entry__all,
.fm-join-form__submit,
.button-primary {
  min-height: var(--fm-control-height);
  border-radius: 0;
}

.fm-btn,
.fm-epk__button,
.fm-gallery-entry__back,
.fm-event-entry__back,
.fm-video-entry__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fm-gallery-entry__back,
.fm-event-entry__back,
.fm-video-entry__back {
  border-color: var(--fm-line-accent);
}

.fm-gallery-entry__nav-link,
.fm-event-entry__nav-link,
.fm-video-entry__nav-link {
  border: 1px solid var(--fm-line);
  border-radius: 0;
  background: var(--fm-panel);
}

.fm-gallery-entry__nav-link:hover,
.fm-gallery-entry__nav-link:focus-visible,
.fm-event-entry__nav-link:hover,
.fm-event-entry__nav-link:focus-visible,
.fm-video-entry__nav-link:hover,
.fm-video-entry__nav-link:focus-visible {
  border-color: var(--fm-line-accent);
}

/* ---------------------------------------------------------
   Shared media behaviour
   --------------------------------------------------------- */

.fm-gallery-entry__lead img,
.fm-gallery-entry__images img,
.fm-event-entry__hero img,
.fm-video-entry__poster img,
.fm-epk__hero-media img {
  width: 100%;
  max-width: none;
}

.fm-gallery-entry__lead img,
.fm-gallery-entry__images img {
  height: auto;
}

/* ---------------------------------------------------------
   Shared node navigation
   --------------------------------------------------------- */

.fm-gallery-entry__navigation,
.fm-event-entry__navigation,
.fm-video-entry__navigation {
  gap: var(--fm-space-3);
  margin-top: var(--fm-space-7);
  padding-top: var(--fm-space-5);
  border-top: 1px solid var(--fm-line);
}

.fm-gallery-entry__nav-link,
.fm-event-entry__nav-link,
.fm-video-entry__nav-link {
  min-height: 4.5rem;
  padding: var(--fm-space-3);
}

.fm-gallery-entry__nav-title,
.fm-event-entry__nav-title,
.fm-video-entry__nav-title {
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   Footer consistency
   --------------------------------------------------------- */

.site-footer {
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--fm-line);
}

.site-footer > * {
  min-width: 0;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  :root {
    --fm-section-space: clamp(3rem, 7vw, 4.5rem);
  }

  .fm-gallery-entry,
  .fm-event-entry,
  .fm-video-entry,
  .fm-epk,
  .fm-join {
    width:
      min(
        var(--fm-shell-content),
        calc(100% - 2rem)
      );
  }

  .fm-event-entry__layout,
  .fm-video-entry__body,
  .fm-epk__hero,
  .fm-epk__contact,
  .fm-join {
    grid-template-columns: 1fr;
  }

  .fm-event-entry__details,
  .fm-video-entry__actions {
    width: 100%;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
  :root {
    --fm-section-space: 2.75rem;

    --fm-heading-page:
      clamp(2.85rem, 14vw, 4.4rem);

    --fm-heading-section:
      clamp(2rem, 10vw, 3.25rem);
  }

  /*
   * One mobile edge for all major public pages.
   */
  .fm-gallery-entry,
  .fm-event-entry,
  .fm-video-entry,
  .fm-epk,
  .fm-join,
  .fm-gallery-hero__inner,
  .events-container,
  .fm-video-main .video-hero-section > .container,
  .fm-video-main #block-fyah-mawi-content {
    width: calc(100% - 2rem);
    max-width: none;
    margin-inline: auto;
  }

  /*
   * Remove desktop min-heights that create large black voids.
   */
  .fm-gallery-entry,
  .fm-gallery-entry section,
  .fm-event-entry,
  .fm-event-entry section,
  .fm-video-entry,
  .fm-video-entry section,
  .fm-epk,
  .fm-epk section,
  .fm-join,
  .fm-event-entry__layout,
  .fm-event-entry__details,
  .fm-video-entry__body,
  .fm-video-entry__actions {
    min-height: 0;
    height: auto;
  }

  /* ---------------- Artist ---------------- */

  .fm-artist-page {
    width: 100%;
    padding-inline: 0;
  }

  .fm-artist-page .fm-artist-hero,
  .fm-artist-page .fm-artist-section,
  .fm-artist-page .fm-booking {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding:
      var(--fm-space-6)
      var(--fm-gutter-mobile);
  }

  .fm-artist-page .fm-artist-hero__inner,
  .fm-artist-page .fm-artist-section__inner,
  .fm-artist-page .fm-artist-grid,
  .fm-artist-page .fm-booking {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
  }

  .fm-artist-page h1 {
    max-width: 8ch;
    font-size:
      clamp(3.25rem, 16vw, 5rem);
    line-height: 0.84;
  }

  .fm-artist-page h2 {
    font-size:
      clamp(2.2rem, 11vw, 3.6rem);
    line-height: 0.92;
  }

  .fm-artist-page p {
    max-width: none;
  }

  /* ---------------- Gallery ---------------- */

  .fm-gallery-entry__title {
    font-size: var(--fm-heading-page);
  }

  .fm-gallery-entry__story {
    width: 100%;
    max-width: none;
    margin-block:
      var(--fm-space-5)
      var(--fm-space-6);
    padding-left: var(--fm-space-3);
    border-left:
      3px solid var(--fm-gold);
  }

  .fm-gallery-entry__additional {
    margin-top: var(--fm-space-6);
  }

  .fm-gallery-entry__images .field__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fm-space-3);
  }

  .fm-gallery-entry__images .field__item {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  .fm-gallery-entry__images img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* ---------------- Event ---------------- */

  .fm-event-entry__title {
    max-width: 9ch;
    font-size: var(--fm-heading-page);
  }

  .fm-event-entry__layout,
  .fm-event-entry__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fm-space-5);
  }

  .fm-event-entry__details {
    width: 100%;
    min-height: 0;
    padding: var(--fm-space-3);
  }

  /* ---------------- Video ---------------- */

  .fm-video-entry__title {
    max-width: 9ch;
    font-size: var(--fm-heading-page);
  }

  .fm-video-entry__player {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .fm-video-entry__poster {
    height: 100%;
  }

  .fm-video-entry__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fm-video-entry__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fm-space-5);
    margin-top: var(--fm-space-5);
  }

  .fm-video-entry__actions {
    width: 100%;
    min-height: 0;
    padding: var(--fm-space-3);
  }

  /* ---------------- EPK ---------------- */

  .fm-epk {
    padding-block: var(--fm-section-space);
  }

  .fm-epk__hero,
  .fm-epk__section,
  .fm-epk__contact {
    padding-block: var(--fm-space-6);
  }

  .fm-epk__hero h1 {
    font-size: var(--fm-heading-page);
  }

  .fm-epk__section-header h2,
  .fm-epk__contact h2 {
    font-size: var(--fm-heading-section);
  }

  .fm-epk__photo-grid > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fm-space-3);
  }

  .fm-epk__photo-grid > div > div {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .fm-epk__photo-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* ---------------- Shared navigation ---------------- */

  .fm-gallery-entry__navigation,
  .fm-event-entry__navigation,
  .fm-video-entry__navigation {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fm-space-2);
    margin-top: var(--fm-space-6);
    padding-top: var(--fm-space-4);
  }

  .fm-gallery-entry__navigation-side,
  .fm-event-entry__navigation-side,
  .fm-video-entry__navigation-side {
    width: 100%;
    text-align: left;
  }

  .fm-gallery-entry__nav-link,
  .fm-event-entry__nav-link,
  .fm-video-entry__nav-link,
  .fm-gallery-entry__back,
  .fm-event-entry__back,
  .fm-video-entry__back {
    width: 100%;
    min-height: 3.75rem;
  }

  .fm-gallery-entry__back,
  .fm-event-entry__back,
  .fm-video-entry__back {
    order: 3;
  }

  /* ---------------- Footer ---------------- */

  .site-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fm-space-5);
    padding:
      var(--fm-space-6)
      var(--fm-space-4);
  }

  .site-footer form,
  .site-footer input,
  .site-footer button {
    max-width: 100%;
  }
}

/* Very narrow phones. */
@media (max-width: 390px) {
  .fm-gallery-entry,
  .fm-event-entry,
  .fm-video-entry,
  .fm-epk,
  .fm-join {
    width: calc(100% - 1.5rem);
  }
}

/* ===== BEGIN FINAL MOBILE POLISH ===== */

/* =========================================================
   FYAH MAWI — FINAL MOBILE POLISH

   Limited to the confirmed narrow-screen issues:
   Event node, Join Us and Contact.
   ========================================================= */

@media (max-width: 640px) {
  /* Shared containment for the three affected routes. */
  :is(
    .fm-event-entry,
    .fm-join,
    .fm-join__inner,
    .contact-page,
    .contact-page__inner
  ) {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    min-width: 0;
    margin-inline: auto;
  }

  :is(
    .fm-event-entry,
    .fm-join,
    .contact-page
  ) :where(
    div,
    section,
    article,
    form,
    fieldset,
    .field,
    .field__item
  ) {
    min-width: 0;
    max-width: 100%;
  }

  /* Event node. */
  .fm-event-entry__header,
  .fm-event-entry__body,
  .fm-event-entry__description,
  .fm-event-entry__booking,
  .fm-event-entry__media,
  .fm-event-entry__navigation {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .fm-event-entry__title {
    max-width: 100%;
    font-size: clamp(2.9rem, 14vw, 4.25rem);
    line-height: 0.9;
    letter-spacing: -0.035em;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }

  .fm-event-entry__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    width: 100%;
    max-width: 100%;
    align-items: start;
  }

  .fm-event-entry__date {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }

  .fm-event-entry__status {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    white-space: normal;
  }

  .fm-event-entry__description {
    font-size: 1rem;
    line-height: 1.72;
  }

  /* Join Us. */
  .fm-join :where(
    h1,
    h2,
    h3,
    p,
    ul,
    ol,
    form,
    fieldset,
    .form-item,
    .form-actions
  ) {
    max-width: 100%;
  }

  .fm-join :where(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
  ) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .fm-join :where(
    h1,
    .fm-join__title
  ) {
    font-size: clamp(2.9rem, 14vw, 4.25rem);
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  /* Contact. */
  .contact-page :where(
    h1,
    h2,
    h3,
    p,
    form,
    fieldset,
    .form-item,
    .form-actions,
    .field,
    .field__item
  ) {
    max-width: 100%;
  }

  .contact-page :where(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
  ) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .contact-page :where(
    h1,
    .contact-hero h1
  ) {
    font-size: clamp(2.9rem, 14vw, 4.25rem);
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }
}

/* ===== END FINAL MOBILE POLISH ===== */

/* ===== BEGIN IMMERSIVE CONTENT WRAPPER POLICY ===== */

/*
 * Custom landing pages own their full-width layout.
 * Ordinary Drupal pages retain the generic bordered content panel.
 */
body.fm-page-immersive .main-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body.fm-page-immersive .main-content > .drupal-content {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.fm-page-immersive
.main-content
> .drupal-content
> div,
body.fm-page-immersive
.main-content
> .drupal-content
.theme-block,
body.fm-page-immersive
.main-content
> .drupal-content
.theme-block-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* ===== END IMMERSIVE CONTENT WRAPPER POLICY ===== */