/* HotelBlox website UI kit — dedicated styles
   Uses tokens from /colors_and_type.css */


/* ========== Buttons ========== */
.htblx-btn {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 26px;
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity .15s ease;
}
.htblx-btn:hover { opacity: .82; }
.htblx-btn--amber { background: var(--htblx-amber); color: var(--htblx-ink); border-radius: 6px; }
.htblx-btn--ink   { background: var(--htblx-ink);   color: var(--htblx-paper); }
.htblx-btn--gray  { background: #7a7a7a;            color: #fff; transition: background .18s ease, color .18s ease; }
.htblx-btn--gray:hover { background: var(--htblx-ink); color: var(--htblx-paper); opacity: 1; }
.htblx-btn--pill  { background: var(--htblx-paper); color: var(--htblx-amber); border-radius: 25px; padding: 10px 28px; border: 1px solid var(--htblx-paper); transition: background .18s ease, color .18s ease; }
.htblx-btn--pill:hover { background: var(--htblx-amber); color: var(--htblx-paper); opacity: 1; }

/* ========== One platform — parallax pinned section ==========
   The <section class="htblx-op"> is 300vh tall so the user scrolls through
   three full states. A pinned inner stage holds:
     .htblx-op-media   — parallax drift layer, single hexagon window,
                          three photos cross-fading inside it
     .htblx-op-content — overlaid headlines / sub copy, tied to scroll
     .htblx-op-rail    — vertical progress indicator on the right edge
*/
.htblx-op {
  position: relative;
  height: 200vh;              /* 3 states — state-based driver in one-platform.js snaps at 33%/66% scroll progress; total scrollable 100vh ≈ 33vh per state hold */
  background: var(--bg);
  overflow: clip;
}

/* The two "layers" below are both sticky at top:0 so they stay pinned in
   the viewport while the section scrolls past behind them. */
.htblx-op-media,
.htblx-op-content,
.htblx-op-rail {
  position: sticky;
  top: 0;
  height: 100vh;
}

/* MEDIA LAYER ------------------------------------------------------- */
.htblx-op-media {
  margin-top: 0;
  margin-bottom: -100vh;        /* collapse its flow so content stacks on top */
  overflow: hidden;
  pointer-events: none;
}

/* The hexagon is anchored at the visual center of the stage; JS drives
   its translate + rotate via inline style. Size: tuned to feel generous
   but leave room for the side headlines. */
.htblx-op-hex {
  position: absolute;
  left: 50%; top: 50%;
  width: 560px; height: 560px;
  transform: translate(-50%, -50%);
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* The hex clip shape — flat-top hexagon, echoes the Hotelblox diamond mark */
.htblx-op-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transition: opacity .6s ease;
  filter: saturate(1.02);
}

/* CONTENT LAYER ----------------------------------------------------- */
/* .htblx-op-content already has position: sticky; top: 0; height: 100vh
   from the shared rule above — that establishes the positioning context
   for the absolute-anchored slides below. Don't redefine. */
.htblx-op-slide {
  position: absolute;
  width: 380px;
  max-width: 38vw;
  transition: opacity .5s ease, transform .6s ease;
  will-change: opacity, transform;
}
.htblx-op-slide--tl {
  top: 16vh;
  left: 6vw;
  text-align: left;
}
.htblx-op-slide--tr {
  top: 22vh;
  right: 6vw;
  text-align: right;
}
.htblx-op-slide--bl {
  bottom: 4vh;
  left: 6vw;
  text-align: left;
}
.htblx-op-text {
  max-width: 420px;
}

/* Arrow doodles — inline SVG anchored toward the hex from each slide.
   Per-position width + height match each creative-team SVG's natural
   aspect ratio so the doodles render at intended proportions. */
.htblx-op-arrow {
  position: absolute;
  pointer-events: none;
}
.htblx-op-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}
.htblx-op-slide--tl .htblx-op-arrow {
  width: 200px;
  height: 191px;
  top: 100%;
  left: 80px;
  right: auto;
  bottom: auto;
}
.htblx-op-slide--tr .htblx-op-arrow {
  width: 320px;
  height: 145px;
  top: 100%;
  right: 80px;
  left: auto;
  transform: scaleY(-1);
}
.htblx-op-slide--bl .htblx-op-arrow {
  width: 260px;
  height: 213px;
  top: -180px;
  right: -160px;
}

.htblx-op-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--htblx-amber);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--htblx-amber);
}

.htblx-op-title {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--fg1);
  font-size: 84px;
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.htblx-op-sub {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--fg2);
  line-height: 1.55;
  margin: 0;
}
/* Mobile photo banner per slide — hidden at desktop; shown in mobile @media block at end of file */
.htblx-op-mobile-photo { display: none; }

/* RAIL (scroll indicator) ------------------------------------------- */
.htblx-op-rail {
  pointer-events: none;
  width: 0;
  margin-right: 0;
}
.htblx-op-rail::before {
  content: "";
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 240px;
  background: var(--htblx-ink-12);
}
.htblx-op-rail-fill {
  position: absolute;
  right: 32px; top: calc(50% - 120px);
  width: 2px;
  background: var(--htblx-amber);
  transition: height .25s ease;
  max-height: 240px;
}
.htblx-op-rail-dot {
  position: absolute;
  right: 26px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--htblx-ink-12);
  transform: translate(0, calc(-50% + (var(--rail-top, 0) - 50%)));
  /* top is set inline; translate compensates so dots center on line */
  margin-top: -120px;    /* align with the 240px centered rail */
  transition: all .25s ease;
}
.htblx-op-rail-dot.is-on {
  background: var(--htblx-amber);
  border-color: var(--htblx-amber);
  transform: scale(1.15);
}

/* ========== PaychecksBand — paper-plane SVG doodle layer ========== */
/* Plane doodle covers the whole card so it can weave beneath the headline
   and through to the body. Positioned absolute with slight overhang on the
   right so the paper plane can "fly off" past the card edge. */
.htblx-paychecks-plane {
  position: absolute;
  left: 0;
  right: -40px;
  top: 0;
  bottom: 0;
  width: calc(100% + 40px);
  height: 100%;
  opacity: .95;
  pointer-events: none;
  z-index: 0;
  /* svg preserves aspect by default — let it stretch to fill. */
}
.htblx-paychecks-plane svg,
.htblx-paychecks-plane {
  preserveAspectRatio: none;
}

.htblx-paychecks-card {
  position: relative;
  max-width: 880px;
  background: #FFFFFF;
  padding: 56px 64px;
}
.htblx-paychecks-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--htblx-ink);
  position: relative;
  z-index: 1;
  margin: 0 0 56px;
}
.htblx-paychecks-body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--htblx-slate);
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0;
}

@media (max-width: 980px) {
  .htblx-paychecks-card { padding: 40px 32px; max-width: 100%; }
  .htblx-paychecks-title { font-size: 44px; margin-bottom: 40px; }
}

/* ========== Steps accordion ========== */
/* -- Accordion rows -- */
.htblx-acc { border-top: 1px solid var(--rule); }
.htblx-acc-row {
  border-bottom: 1px solid var(--rule);
  outline: none;
  cursor: pointer;
}
.htblx-acc-head {
  display: grid; grid-template-columns: 64px 1fr 28px;
  align-items: center; gap: 24px;
  padding: 24px 8px;
  transition: padding .35s ease;
}
.htblx-acc-n {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 22px; color: var(--htblx-slate);
}
.htblx-acc-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 28px; color: var(--fg1); letter-spacing: -0.01em;
  line-height: 1.2;
  transition: color .3s ease;
}
.htblx-acc-chev {
  font-family: var(--font-sans); font-weight: 400; font-size: 22px;
  color: var(--fg3); justify-self: end;
  transition: color .3s ease;
}
.htblx-acc-row.is-open .htblx-acc-title { color: var(--htblx-burgundy); }
.htblx-acc-row.is-open .htblx-acc-n { color: var(--htblx-burgundy); }
.htblx-acc-row.is-open .htblx-acc-chev { color: var(--htblx-burgundy); }

/* Collapsed body: 0 height, hidden */
.htblx-acc-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-height: 0; overflow: hidden; opacity: 0;
  padding: 0 8px 0 88px;
  transition: max-height .5s ease, opacity .3s ease, padding .4s ease;
}
.htblx-acc-row.is-open .htblx-acc-body {
  max-height: 520px; opacity: 1;
  padding: 4px 8px 32px 88px;
}

.htblx-acc-img-wrap {
  overflow: hidden;
  background: var(--bg-soft);
}
.htblx-acc-img {
  width: 100%; height: 100%;
  min-height: 260px;
  object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.htblx-acc-row.is-open .htblx-acc-img { transform: scale(1.0); }

.htblx-acc-detail {
  font-family: var(--font-sans); font-size: 15px; color: var(--fg2); line-height: 1.7;
  align-self: center;
}
.htblx-acc-detail p { margin: 0 0 10px; }
.htblx-acc-detail ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.85; }
.htblx-step-key { color: var(--fg1); }
.htblx-step-foot { color: var(--fg3); font-style: italic; }

/* ============================================================
   Divi Theme Builder Footer — Menu module vertical stack override
   Divi 5's Menu Layout setting doesn't render vertical reliably,
   so we force the stack at all viewport sizes via the .et-l--footer
   scope. Mobile hamburger + alt mobile menu suppressed because
   the footer link list shows the same on all sizes.
   ============================================================ */

/* Keep the desktop menu wrapper visible at all sizes
   (defeats Divi's default mobile-hide-the-desktop-menu rule) */
.et-l--footer .et_pb_menu .et_pb_menu__menu {
  display: block !important;
}

/* Stack the items */
.et-l--footer .et_pb_menu .et_pb_menu__menu .menu,
.et-l--footer .et_pb_menu .menu {
  display: block !important;
  flex-direction: column !important;
}

/* Override id-scoped Divi rules that apply display:flex via WP's
   auto-generated menu id (e.g., #menu-primary-nav-1). */
.et-l--footer .et_pb_menu ul[id^="menu-"] {
  display: block !important;
  flex-direction: column !important;
}

.et-l--footer .et_pb_menu .menu-item {
  display: block !important;
  float: none !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.et-l--footer .et_pb_menu .menu-item:last-child {
  margin-bottom: 0 !important;
}

.et-l--footer .et_pb_menu .menu-item > a {
  padding: 0 !important;
}

/* Hide Divi's mobile hamburger + alt mobile menu in footer
   (the desktop list above shows at all sizes, so they're noise) */
.et-l--footer .et_pb_menu .et_mobile_nav_menu,
.et-l--footer .et_pb_menu .et_mobile_menu,
.et-l--footer .et_pb_menu .mobile_menu_bar {
  display: none !important;
}

/* ========== Partners logo grid (Services page) ========== */
/* The 4×4 logo grid is the one Services-page layout pattern Divi can't render
   natively without a heavy Specialty Section + 16 Image modules. Kept as a
   Text-module-with-HTML approach. All other Services-page styling (services
   grid cards, partners typography, stats grid, contact dl typography) goes
   through Divi UI per the Divi-first architecture. */
.htblx-partners-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: var(--htblx-paper);
}
.htblx-partners-logo {
  padding: 28px 18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.htblx-partners-logo img {
  max-width: 100%;
  height: auto;
  filter: brightness(0);
  opacity: 0.7;
  transition: opacity .2s ease;
}
.htblx-partners-logo:hover img { opacity: 1; }

/* ========== Contact dl (Services page) ========== */
.htblx-contact-dl { display: grid; gap: 20px; margin: 0; }
.htblx-contact-dl > div { display: grid; gap: 4px; }
.htblx-contact-dl dt {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--htblx-slate);
}
.htblx-contact-dl dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--htblx-ink);
  line-height: 1.55;
}

/* ========== Services page mobile (≤980px) ========== */
@media (max-width: 980px) {
  .htblx-partners-logos { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Mobile (≤980px) — comprehensive responsive overrides for
   OnePlatform fallback, footer columns, Services Grid
   stacked-card borders, Steps accordion stacked body.
   Placed at end of file so source order beats earlier base
   rules (e.g., .htblx-acc-body grid-template-columns).
   See docs/superpowers/specs/2026-05-08-hotelblox-mobile-polish-v2-design.md
   ============================================================ */
@media (max-width: 980px) {

  /* ---------- OnePlatform mobile fallback ----------
     Parallax JS bails at <=980px (see one-platform.js).
     Section becomes 3 stacked content blocks: no hex, no
     desktop photos, no pin scroll, no rail, no arrows.
     Each slide gets a full-width mobile photo banner. */
  .htblx-op {
    height: auto;
    overflow: visible;
  }
  .htblx-op-media {
    display: none;
  }
  .htblx-op-content,
  .htblx-op-rail {
    position: static;
    height: auto;
  }
  .htblx-op-rail {
    display: none;
  }
  .htblx-op-slide,
  .htblx-op-slide--tl,
  .htblx-op-slide--tr,
  .htblx-op-slide--bl {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    width: auto;
    max-width: 100%;
    padding: 32px 24px;
    text-align: left;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 0 0 16px;
  }
  .htblx-op-arrow {
    display: none;
  }
  .htblx-op-title {
    font-size: 48px;
  }
  .htblx-op-mobile-photo {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 24px;
  }

  /* ---------- Footer columns full-width stacking ----------
     Force every footer column to take a full row so each block
     (logo, nav menu, address/contact, newsletter form) doesn't
     share horizontal space with neighbors. */
  .et-l--footer .et_pb_row > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 32px;
  }
  .et-l--footer .et_pb_row > .et_pb_column:last-child {
    margin-bottom: 0;
  }

  /* ---------- Services Grid stacked-card borders ----------
     Each card takes a full row when stacked. Drop the dangling
     right border and use bottom-only rules to separate cards. */
  .htblx-svc-row .et_pb_column {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .htblx-svc-row:last-of-type .et_pb_column:last-child {
    border-bottom: 0 !important;
  }

  /* ---------- Steps accordion mobile body ----------
     Stack image above detail (was 2-col). Tighter padding +
     smaller header typography. Block is at end of file so it
     wins source-order over earlier .htblx-acc-body base rule. */
  .htblx-acc-head {
    grid-template-columns: 48px 1fr 28px;
    gap: 14px;
    padding: 18px 8px;
  }
  .htblx-acc-title {
    font-size: 20px;
  }
  .htblx-acc-body {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 8px;
  }
  .htblx-acc-row.is-open .htblx-acc-body {
    padding: 4px 8px 24px;
  }
  .htblx-acc-img-wrap {
    min-height: 0;
  }
  .htblx-acc-img {
    min-height: 200px;
    max-height: 240px;
    object-fit: cover;
  }
}