/* Page CSS for layouts/about.njk — lifted out of the layout so it is
   cached instead of re-sent inside every HTML response. */
/* "At Khonsu" statement — image left, centered statement panel right */
    .values-split {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--s-6);
      align-items: stretch;
      background: var(--bg-page);
      border: 1px solid var(--line);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }
    .values-split__media {
      background: var(--bg-soft);
    }
    .values-split__media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .values-split__panel {
      padding: var(--s-7) var(--s-6);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      text-align: left;
    }
    .values-split__panel h2 {
      margin: 0 0 var(--s-3);
    }
    .values-split__panel p {
      max-width: 40ch;
      margin: 0;
      color: var(--ink-soft);
    }
    @media (min-width: 880px) {
      .values-split { grid-template-columns: 2fr 1fr; gap: 0; align-items: center; }
      .values-split__media { align-self: stretch; }
      .values-split__panel h2 { font-size: 1.6rem; line-height: 1.2; }
    }
  
    /* "Recognition" cards — white surface with a gold hairline border (brand CI).
       Source label and link stay gold; rank number + title stay midnight-navy,
       inheriting the base .ranking colours. Matches the index "In the press" cards. */
    .rankings .ranking {
      background: #fff;
      border: 1.5px solid var(--khonsu-gold);
      box-shadow: 0 6px 18px rgba(19, 36, 54, 0.05);
    }
    .rankings .ranking:hover {
      border-color: var(--khonsu-gold-dim);
      box-shadow: 0 10px 28px rgba(19, 36, 54, 0.12);
      transform: translateY(-2px);
    }

    /* Horizontal carousel: show 3 cards, scroll left/right for the rest. */
    .rankings {
      display: flex;
      gap: var(--s-4);
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      padding: 8px 4px 16px;
      scrollbar-width: none; -ms-overflow-style: none; /* dots replace the bar */
    }
    .rankings .ranking {
      flex: 0 0 calc((100% - 2 * var(--s-4)) / 3);
      min-width: 0;
    }
    .rankings::-webkit-scrollbar { display: none; }
    @media (max-width: 1024px) {
      .rankings .ranking { flex-basis: calc((100% - var(--s-4)) / 2); }
    }
    @media (max-width: 720px) {
      .rankings .ranking { flex-basis: 82%; }
    }

    /* Carousel arrow buttons */
    /* Reserve side gutters so the arrows sit beside the cards, not over them. */
    .rankings-carousel { position: relative; padding-inline: 56px; }
    .rankings-nav {
      position: absolute;
      top: calc(50% - 8px);
      transform: translateY(-50%);
      z-index: 3;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      color: var(--khonsu-midnight);
      background: #fff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
      transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
    }
    .rankings-nav:hover { background: var(--khonsu-midnight); color: #fff; }
    .rankings-nav--prev { left: 6px; }
    .rankings-nav--next { right: 6px; }
    .rankings-nav:disabled { opacity: 0.35; pointer-events: none; }
    @media (max-width: 720px) {
      /* On small screens the cards already fill the row, so tuck the gutters in. */
      .rankings-carousel { padding-inline: 40px; }
      .rankings-nav--prev { left: 0; }
      .rankings-nav--next { right: 0; }
    }
    /* Pagination dots — shown on all viewports (arrows dropped; dots navigate). */
    .rankings-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    /* Namespaced class — a plain ".dot" collides with the Trustindex reviews
       widget's own slider dots (which set width/background with !important). */
    .rankings-dots .rankings-dot {
      width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
      background: rgba(19, 36, 54, 0.18); cursor: pointer;
      transition: width 0.25s ease, background 0.25s ease;
    }
    .rankings-dots .rankings-dot--active { width: 22px; border-radius: 99px; background: var(--khonsu-gold); }
    /* Phones (iPhone 12 Pro ~390px and similar 360-430px): drop the arrow gutters,
       hide the arrows, and widen each card so it nearly fills the screen with a small
       peek of the next. Swipe to scroll; pagination dots show the position. */
    @media (max-width: 560px) {
      .rankings-carousel { padding-inline: 0; }
      .rankings-nav { display: none; }
      .rankings .ranking { flex-basis: 86%; scroll-snap-align: center !important; } /* ponytail: center = equal swipe + last card reachable; !important beats the base `.rankings .ranking{start}` defined later in the file, mobile only */
      .rankings { scroll-behavior: auto; } /* ponytail: auto on phones kills the smooth-glide snap lag */
      .rankings .ranking:hover { box-shadow: none; transform: none; }
    }

    /* Mobile: merge "Visit us" + "Office hours" into ONE white card, dropped
       to the Office hours slot (below the page copy) instead of floating to
       the top. Scoped via #main so the shared global aside rules on other
       layout-2 pages (e.g. company-registration) are unaffected. */
    @media (max-width: 979px) {
      #main .aside-col {
        display: block;
        order: 2;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
      }
      #main .aside-col .aside-card--contact,
      #main .aside-col .aside-card--related {
        background: transparent;
        border: 0;
        border-radius: 0;
      }
      /* No divider; the Visit us <-> Office hours gap equals the Bangkok HQ
         <-> Phuket Office spacing (24px = --s-5). Zero the seam paddings and
         let the Office hours heading's own margin-top provide the 24px
         (flow-root contains it). !important overrides the inline
         margin-top:32px on that <h3> for mobile only — desktop keeps 32px. */
      #main .aside-col .aside-card--contact { padding-bottom: 0; }
      #main .aside-col .aside-card--related { padding-top: 0; display: flow-root; }
      #main .aside-col .aside-card--related h3 { margin-top: var(--s-6) !important; }
      /* Undo the global navy-mode text/button colours (white-on-white here)
         and restore brand dark text + gold-rule headings. */
      #main .aside-col h3 { color: var(--khonsu-midnight); }
      #main .aside-col h3::after {
        content: ""; display: block; width: 34px; height: 2px;
        background: var(--accent); margin-top: 10px;
      }
      #main .aside-col .aside-card--contact .small { color: var(--ink-soft); }
      #main .aside-col .aside-card--contact .btn--ghost {
        color: var(--khonsu-midnight); border-color: var(--line);
      }
    }

    /* Desktop: keep the framed shell (shadow, seam, gold underline) but render
       both sub-cards in one light tone instead of the global navy contact
       treatment, and pull the gold seam in to align with the buttons above. */
    @media (min-width: 980px) {
      #main .aside-col--framed .aside-card--contact {
        background: var(--bg-soft);            /* shorthand resets the navy gradient → light */
        color: var(--ink);
      }
      #main .aside-col--framed .aside-card--contact h3 { color: var(--khonsu-midnight); }
      #main .aside-col--framed .aside-card--contact .small { color: var(--ink-soft); }
      #main .aside-col--framed .aside-card--contact .btn--ghost {
        color: var(--khonsu-midnight); border-color: var(--line);
      }
      #main .aside-col--framed .aside-card--related::before { left: var(--s-6); right: var(--s-6); }
    }

    /* Merged "Visit us + Office hours" card — navy with a gold glow at the top,
       matching the service-page hero band. Overrides the cream/light treatment
       above on BOTH mobile and desktop. */
    #main .aside-col .aside-card--visit,
    #main .aside-col--framed .aside-card--visit {
      background:
        radial-gradient(ellipse 85% 50% at 50% 0%, rgba(223,193,135,.30), transparent 60%),
        linear-gradient(180deg,#183246,#132436);
      color: rgba(255,255,255,.85);
    }
    #main .aside-col .aside-card--visit h3 {
      color: #dfc187;
    }
    /* Gold dash under each heading */
    #main .aside-col .aside-card--visit h3 .visit-dash {
      display: block;
      width: 42px;
      height: 3px;
      background: #dfc187;
      margin-top: 10px;
    }
    /* Neutralise the shared mobile h4::after dash so we don't get two dashes */
    #main .aside-col .aside-card--visit h3::after { content: none; }
      @media (min-width: 980px){ #main .aside-col--framed .aside-card--visit { border-radius: var(--r-lg); box-shadow: 0 18px 40px rgba(19,36,54,.28); } }
      #main .aside-col .aside-card--visit .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.85); color: #fff; }
      @media (max-width: 979px){ #main .aside-col .aside-card.aside-card--visit { padding-bottom: var(--s-6); } }
    #main .aside-col .aside-card--visit .small { color: rgba(255,255,255,.85); }
    #main .aside-col .aside-card--visit .small strong { color: #fff; }
    /* "View on Google Maps" ghost buttons read on navy */
    #main .aside-col .aside-card--visit .btn--ghost {
      color: #fff;
      border-color: rgba(255,255,255,.45);
    }
    /* Thin divider between Visit us and Office hours */
    #main .aside-col .aside-card--visit .visit-divider {
      height: 1px;
      background: rgba(255,255,255,.16);
      margin: 28px 0;
    }
    #main .aside-col .aside-card--visit .visit-hours-h { margin-top: 0; }

    /* One-card-at-a-time snapping for the Recognition carousel */
    .rankings { scroll-snap-type: x mandatory; padding-top: 6px; padding-bottom: 6px; }
    .rankings .ranking { scroll-snap-align: start; }