/*
 * Mobile layout fixes for the shipped bundle.
 *
 * These correct real bugs in the original build. Everything is scoped to
 * max-width:767px (Tailwind's md breakpoint), so tablet and desktop render
 * exactly as they always did.
 */

/* ------------------------------------------------------------------------
 * 1. The "Craft Journey" header button is marked `hidden md:inline-flex`, so
 *    it is meant to disappear on phones. It did not, because
 *    `.hidden{display:none}` sits at char 7275 of the stylesheet while
 *    `.btn-primary{...display:inline-flex}` sits at char 31443 - same
 *    specificity, later one wins. The button then covered the wordmark and
 *    crowded the menu button.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .btn-primary.hidden { display: none !important; }
}

/* ------------------------------------------------------------------------
 * 2. Hero photography.
 *
 *    The heroes are landscape frames (1.33-2.00 wide) shown in a 100svh
 *    portrait box with object-fit:cover, so roughly 64% of each photo's width
 *    was cropped away - on a phone you saw a narrow strip of the animal. The
 *    copy sat over that same box, which also let the chapter marker collide
 *    with the headline once the browser's URL bar shortened the viewport.
 *
 *    On phones the photo now gets its own 4:3 band, sized so the whole frame
 *    is visible, and the copy sits underneath it on the section's own dark
 *    ground. Both hero shapes are handled: the home carousel wraps each slide
 *    in a div, the safari pages use a bare <img>.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
  section[class*="100svh"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Home carousel: each slide is wrapped in a div, so the wrapper is the band. */
  section[class*="100svh"] > div.absolute.inset-0 {
    bottom: auto !important;
    height: auto !important;
    aspect-ratio: 4 / 3;              /* suits the 1.33-1.50 majority */
  }
  section[class*="100svh"] > div.absolute.inset-0 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* nothing cropped */
    transform: none !important;       /* stop the Ken Burns drift */
  }

  /* Safari pages: the <img> is a direct child, so it is the band itself.
     Kept in its own block - sharing the rule above let height:100% override
     the aspect-ratio and the band grew to the full section. */
  section[class*="100svh"] > img.absolute.inset-0 {
    bottom: auto !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    width: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* grain over a letterboxed frame just reads as noise */
  section[class*="100svh"] > div.grain { display: none !important; }

  /* chapter marker and copy move below the photo */
  section[class*="100svh"] > div[class*="top-24"] {
    top: calc(75vw + 18px) !important;
    left: 1.5rem !important;
  }
  section[class*="100svh"] > div[class*="items-end"] {
    height: auto !important;
    padding-top: calc(75vw + 104px) !important;
    padding-bottom: 28px !important;
  }
  /* safari pages have no chapter marker, so their copy starts higher */
  section[class*="100svh"] > img.absolute.inset-0 ~ div[class*="items-end"] {
    padding-top: calc(75vw + 28px) !important;
  }
  section[class*="100svh"] div[class*="pb-28"],
  section[class*="100svh"] div[class*="pb-20"] {
    padding-bottom: 0 !important;
  }

  /* slide indicators follow the copy instead of floating over the photo */
  section[class*="100svh"] > div[class*="bottom-8"] {
    position: relative !important;
    bottom: auto !important;
    padding-bottom: 16px !important;
  }

  /* 16vw is 58px at 360px wide - too big for a two-word title to breathe */
  section[class*="100svh"] h1 { font-size: 12.5vw !important; line-height: 1.04 !important; }
}

/* ------------------------------------------------------------------------
 * 3. The chapter strip lists all eight safaris, but at 360px only 01-06 fit;
 *    07 and 08 sat past the right edge inside an overflow:hidden parent, so
 *    two of the eight slides could not be reached on a phone at all.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
  section[class*="100svh"] div[class*="gap-3"][class*="items-center"] { gap: 0.3rem !important; }
  section[class*="100svh"] button[class*="gap-2"][class*="items-center"] {
    gap: 0.22rem !important;
    padding: 0.7rem 0.2rem !important;   /* invisible, but makes the dot tappable */
  }
  section[class*="100svh"] button[class*="gap-2"] span[class*="h-\[2px\]"] {
    width: 0.45rem !important;
  }
}

/* ------------------------------------------------------------------------
 * 4. Tap targets. Footer and nav links rendered 19px tall with no padding,
 *    well under the ~44px a fingertip needs. Padding costs nothing visually.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
  footer a, header nav a {
    display: inline-block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* ------------------------------------------------------------------------
 * 5. Type below ~12px is not comfortably readable on a phone; 10px and 11px
 *    letterspaced caps are the house style, so nudge rather than restyle.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
  [class*="text-[10px]"] { font-size: 11.5px !important; }
  [class*="text-[11px]"] { font-size: 12px !important; }
}

/* ------------------------------------------------------------------------
 * 6. The footer address column is 120px wide on a phone, so a long address
 *    runs off the screen. (enhance.js adds the break point after the "@";
 *    this is the belt-and-braces half.)
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
  footer a[href^="mailto:"] { overflow-wrap: break-word; }
}

/* ------------------------------------------------------------------------
 * 7. The same collision happens on desktop and tablet, just triggered by a
 *    short window rather than a phone.
 *
 *    The chapter block is pinned at top:112px and ends at 186px, while the
 *    hero copy is vertically centred in a 100svh box. Shorten the window and
 *    the centred block rises: measured at 1280x700 the copy starts at 133px
 *    and at 1024x600 it starts at 107px - both well inside the chapter block,
 *    so "04 / Chapter / of 08" ends up under the headline.
 *
 *    Reserve the space instead, and let the hero grow rather than clip when a
 *    window is too short to hold both.
 * --------------------------------------------------------------------- */
@media (min-width: 768px) {
  section[class*="100svh"] {
    height: auto !important;
    min-height: 100svh;
  }
  /* only the home carousel centres its copy; the safari pages bottom-align
     theirs and have no chapter block to clash with */
  section[class*="100svh"] > div[class*="items-center"] {
    padding-top: 200px !important;    /* chapter block ends at 186px */
    padding-bottom: 112px !important; /* clears the slide indicator strip */
  }
}