/* ==========================================================
   MOBILE READABILITY + COMPACT LAYOUT FIX
   Fixes clipped long hero words, cramped offering cards, and excess mobile padding
   ========================================================== */

/* Shared long-word protection */
.hero h1,
.booking-hero h1,
.work-hero h1,
.gallery-prologue h2,
.chapter__heading h2,
.statement h2 {
  overflow-wrap: normal;
  word-break: normal;
}

/* --------------------------
   HOMEPAGE MOBILE FIXES
   -------------------------- */

@media (max-width: 900px) {
  .hero {
    overflow-x: hidden;
  }

  .hero__copy {
    padding:
      clamp(1.35rem, 5vw, 2.35rem)
      var(--gutter)
      clamp(2.3rem, 7vw, 3.75rem);
  }

  .hero h1 {
    font-size: clamp(3rem, 11.6vw, 5.35rem);
    line-height: 0.9;
    letter-spacing: 0.028em;
    max-width: 100%;
  }

  .hero h1 em {
    font-size: 0.42em;
  }

  .hero__intro {
    font-size: clamp(0.98rem, 3.4vw, 1.08rem);
    line-height: 1.62;
  }

  .hero__image {
    height: min(48svh, 29rem);
    min-height: 19rem;
  }

  .featured,
  .statement,
  .info-panels {
    padding-top: clamp(2rem, 7vw, 3.4rem);
    padding-bottom: clamp(2rem, 7vw, 3.4rem);
  }
}

@media (max-width: 520px) {
  :root {
    --gutter: clamp(1rem, 5vw, 1.35rem);
  }

  .brand-name {
    max-width: 11.5rem;
    letter-spacing: 0.18em;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 10.9vw, 4.35rem);
    line-height: 0.92;
    letter-spacing: 0.018em;
  }

  .eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
  }
}

/* --------------------------
   BOOKINGS MOBILE FIXES
   -------------------------- */

@media (max-width: 1180px) {
  .booking-hero {
    height: auto;
    min-height: auto;
  }

  .booking-hero__image {
    order: 1;
    height: min(46svh, 28rem);
    min-height: 17rem;
  }

  .booking-hero__image img {
    min-height: 0;
    object-position: center 24%;
  }

  .booking-hero__copy {
    order: 2;
    padding:
      clamp(1.5rem, 5vw, 2.4rem)
      var(--gutter)
      clamp(2rem, 6vw, 3.25rem);
  }

  .booking-hero h1 {
    font-size: clamp(3.2rem, 10.8vw, 5.8rem);
    line-height: 0.9;
    letter-spacing: 0.035em;
  }

  .booking-hero__copy p:not(.eyebrow) {
    max-width: 36rem;
    line-height: 1.58;
  }

  .booking-hero__actions {
    margin-top: 1.15rem;
  }

  .session-offerings,
  .booking-process,
  .booking-panels {
    padding-top: clamp(1.5rem, 5vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 5vw, 2.75rem);
  }

  .offering-grid {
    grid-template-columns: 1fr 1fr;
  }

  .offering-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .offering-card figure {
    height: clamp(8.5rem, 26vw, 13rem);
  }

  .offering-card div {
    padding: clamp(0.95rem, 3vw, 1.25rem);
  }

  .offering-card h3,
  .process-step h3,
  .collection-card h3 {
    font-size: clamp(0.78rem, 2.2vw, 0.95rem);
    letter-spacing: 0.16em;
    line-height: 1.32;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .offering-card p,
  .process-step p,
  .collection-card p {
    font-size: 0.88rem;
    line-height: 1.5;
  }
}

@media (max-width: 760px) {
  .booking-hero h1 {
    font-size: clamp(3rem, 11.5vw, 4.8rem);
    letter-spacing: 0.025em;
  }

  .booking-section-title {
    margin-bottom: 1rem;
  }

  .offering-grid,
  .process-grid,
  .collection-grid,
  .booking-panels,
  .booking-final-cta,
  .inquiry-panel {
    grid-template-columns: 1fr;
  }

  .offering-card {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    min-height: 9.5rem;
  }

  .offering-card figure {
    height: auto;
    min-height: 100%;
  }

  .offering-card h3 {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    line-height: 1.28;
  }

  .offering-card p {
    margin-top: 0.55rem;
    font-size: 0.84rem;
    line-height: 1.42;
  }

  .process-step {
    min-height: auto;
    padding: 1.15rem;
  }

  .process-step span {
    width: 2.7rem;
    height: 3.25rem;
    margin-bottom: 0.9rem;
  }

  .booking-panels {
    gap: 0.75rem;
  }

  .inquiry-panel__image {
    min-height: 10rem;
  }

  .inquiry-panel__copy,
  .collections-panel {
    padding: clamp(1.2rem, 5vw, 1.6rem);
  }

  .inquiry-panel h2,
  .collections-panel h2,
  .booking-final-cta h2 {
    font-size: clamp(2.35rem, 10vw, 4rem);
  }
}

@media (max-width: 430px) {
  .booking-hero__image {
    height: min(40svh, 23rem);
  }

  .booking-hero h1 {
    font-size: clamp(2.75rem, 11vw, 4.1rem);
  }

  .offering-card {
    grid-template-columns: 7.4rem minmax(0, 1fr);
  }

  .offering-card h3 {
    font-size: 0.72rem;
    letter-spacing: 0.115em;
  }

  .offering-card p {
    font-size: 0.8rem;
  }
}