/* ============================================================
   page-specific.css
   Merged home of per-section ("page specific") CSS that used to live
   in separate files. Each section below preserves the original rules
   verbatim — only the file boundaries were collapsed, no selectors,
   specificity, !important, media-query breakpoints, or declaration
   order were changed.

   Load order note: this file is linked AFTER footer.css (and the
   original why-ume rules now merged into it) and BEFORE the third-party
   leaflet.css, matching the previous link order
   (why-ume -> footer -> office-map -> experiences -> leaflet).
   ============================================================ */

/* ============================================================
   PAGE BASE / EXISTING
   ============================================================ */
/* The base page layout, hero, FAQ accordion, reviews carousel dots, and
   top-navigation states are defined inline in the <head> <style> block of
   index.html. Nothing from that block is duplicated here. This section is
   kept as a placeholder so future page-level rules have a clear home. */

/* ============================================================
   TOKYO OFFICE / MAP
   (formerly assets/css/office-map.css)
   ============================================================ */
/* Tokyo Office live map — explicit container heights.
 *
 * Root cause of the mobile "blank map": the map wrapper relied on Tailwind's
 * base `h-[300px]` utility for its height. That utility is absent from the
 * compiled/inline Tailwind layer (only `sm:h-[340px]` / `md:h-[380px]` resolve),
 * so below 640px the wrapper height fell back to the Office image's natural
 * height (~235px) while the Leaflet panel — which has no intrinsic height — was
 * squished to ~2px and rendered blank. Desktop was fine because `md:h-[380px]`
 * applied. These ID-scoped rules pin the container height at every breakpoint
 * (matching the original 300 / 340 / 380 intent) so Leaflet always has a real
 * box, independent of the Tailwind build. map.invalidateSize() in main.js keeps
 * the canvas correctly measured whenever the Map view becomes visible again. */

#office-map {
  width: 100%;
  height: 100%;
}

/* Mobile: the Office/Map frame height follows the photo's real ratio (530x390)
   so the image fills exactly with no blank strip below it; Map and Office share
   this same frame height. Tablet/desktop keep fixed heights via sm:h-[340px] /
   md:h-[380px] on the element. */
@media (max-width: 639px) {
  .office-map-frame {
    aspect-ratio: 530 / 390;
    height: auto;
    /* Safety net: guarantees a non-zero frame even on engines where
       aspect-ratio + height:auto + a height:100% child fails to resolve,
       so the Map/Office panel can never collapse to 0 on mobile after a
       Tailwind recompile removes the base h-[300px] utility. */
    min-height: 210px;
  }
}

/* ============================================================
   EXPERIENCES
   (formerly assets/css/experiences.css)
   ============================================================ */
/* Experiences module mobile fixes: stronger bottom gradient mask + spacing between description and CTA.
   The visible cards are the JS-cloned .experience-card elements inside .exp-slot-* wrappers. */

/* Single, bottom-only overlay for the Experience image.
   The markup applies ONE Tailwind gradient div (bg-gradient-to-t) per card. We override it
   with a bottom-anchored, fading gradient so only the lower ~1/3 darkens enough for the white
   category / title / description / CTA to stay readable, while the top ~2/3 shows the original
   photo at near-full brightness. This is the ONLY overlay layer — the previous duplicate
   ::after pseudo-element (desktop + mobile) has been removed to stop the stacking that made
   the center card read near-black. Applies to desktop slots and mobile squares alike. */
#curated-matrix-section .experience-card .bg-gradient-to-t {
  background-image: linear-gradient(to top,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.20) 35%,
    rgba(0, 0, 0, 0.05) 70%,
    transparent 100%);
}


@media (max-width: 767px) {
  /* Mobile: a single SQUARE (1:1) card — never a tall vertical poster.
     Replaces the old fixed 460px height. The inline <style> mobile block also
     sets aspect-ratio: 1/1, so the square wins regardless of CSS load order. */
  #curated-matrix-section .exp-slot {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Keep images covering the square without distortion. All source photos are
     landscape (800x500), so object-fit: cover + center shows the full height and
     the center horizontal band — the main subject stays intact, no stretching. */
  #curated-matrix-section .exp-slot .experience-card img {
    object-fit: cover;
    object-position: center;
  }

  /* Tighten the content padding a touch so the category / title / description /
     CTA all fit the shorter square card. None of these are ever hidden. */
  #curated-matrix-section .exp-slot .experience-card .flex.flex-col.justify-end {
    padding: 1.25rem;
  }


  /* Increase gap between description text and the CTA button. */
  #curated-matrix-section .exp-slot .experience-card .exp-desc {
    margin-bottom: 0.5rem;
  }
  #curated-matrix-section .exp-slot .experience-card .exp-customize {
    margin-top: 1.5rem !important;
  }

  /* Reduce the gap between the square card and the dots (avoid empty space below). */
  #curated-matrix-section .experience-dots {
    margin-top: 1rem;
  }
}

/* ============================================================
   REVIEWS
   ============================================================ */
/* Reviews-section styles (dots, panels) live inline in the <head> <style>
   block of index.html. No separate file was merged here. */

/* ============================================================
   MOBILE TOUCH SWIPE (Experience + Reviews)
   touch-action: pan-y lets the browser keep vertical page scrolling
   while our JS owns horizontal swipe gestures. Scoped to the mobile
   breakpoint so desktop/laptop behavior is unchanged.
   ============================================================ */
@media (max-width: 767px) {
  #curated-matrix-section,
  #reviews-section {
    touch-action: pan-y;
  }
}

/* ============================================================
   MOBILE FLOATING MENU (FAB -> #mobile-menu drawer)
   The FAB (#mobile-menu-btn) sits bottom-right and opens the nav
   drawer. It MUST be lifted ABOVE the fixed bottom CTA bar
   (.quick-inquiry: height 50px, z-index 999) so the CTA cannot
   cover / block it. This is done by moving it up via `bottom`
   (per the audit: do NOT fix the position with a higher z-index).
   Visible on phone + tablet; the `lg:hidden` wrapper hides it on
   desktop, so this rule's (max-width:1023px) matches its range.
   ============================================================ */
@media (max-width: 1023px) {
  :root {
    --mobile-bottom-cta-height: 50px;
  }
  #mobile-menu-btn {
    bottom: calc(
      var(--mobile-bottom-cta-height)
      + 12px
      + env(safe-area-inset-bottom, 0px)
    );
  }
}

/* ============================================================
   TOKYO OFFICE / MAP — MapLibre marker (CARTO Voyager style)
   ============================================================
   MapLibre uses DOM-based markers (no L.icon style).
   Replicates the previous green UME Travel logo circular badge:
   green fill, white ring, bold "UME" + thin "Travel" stacked text.
   The element is created in initOfficeMap() (assets/js/main.js) and
   passes through maplibregl.Marker({ element, anchor: "center" }),
   so the marker is positioned by MapLibre — the translate(-50%, -50%)
   centers the badge on its anchor coordinate. The white halo + drop
   shadow make it pop on the Voyager basemap (light pastel background). */
.ume-map-marker {
  position: relative;
  width: 0;
  height: 0;
  pointer-events: none; /* the marker itself is decorative; the map owns gestures */
}

.ume-map-marker__logo {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 54px !important; /* beat Tailwind v4's img { max-width:100%; height:auto } */
  height: 54px !important;
  max-width: none;
  border-radius: 9999px;
  object-fit: contain; /* keep the circular logo proportions intact */
  border: 3px solid #ffffff;
  box-shadow:
    0 4px 10px -2px rgba(15, 42, 33, 0.35),
    0 1px 3px rgba(15, 42, 33, 0.18);
  user-select: none;
  pointer-events: auto;
}

/* Tighter badge on small screens — Voyager city labels stay readable. */
@media (max-width: 639px) {
  .ume-map-marker__logo {
    width: 44px !important;
    height: 44px !important;
    border-width: 2px;
  }
}

/* MapLibre's default controls + attribution already styled by
   maplibre-gl.css. We only nudge the bottom-right attribution to match
   the screenshot ("MapLibre | © CARTO, © OpenStreetMap contributors"
   plus an inline info icon). The default compact attribution already
   injects "MapLibre" + the data sources, so no extra override needed. */
