/* =====================================================================
   TRIWAYS — /capabilities/accommodation/
   Loaded by that page only, after triways-article.css and
   triways-visual.css. Prefix: tv-ac-   (body.tv-ac)
   Colours and type come from the site tokens in triways-core.css
   (--hb-ink, --hb-ivory, --hb-white, --hb-gold, --hb-champagne, --hb-serif,
   --hb-sans) and --tv-brass-text from triways-visual.css. Nothing here
   styles the header, the navigation or the footer.

   Patterns another inside page can take as they are (add the page's own
   body class next to them, or lift the block into a shared file):
     .tv-ac-hero    photograph behind the title, boxed answer panel right
     .tv-ac-list    counted items on a brass rule (<ol>; --brief = larger)
     .tv-ac-brands  5 x 2 register of hairline cells for .art-brands
     .tv-ac-stay    one wide photograph and four equal ones for .art-fleet
     .tv-ac-faq     plus / minus accordion on native <details> (with .tv-faq)
     .tv-ac-brief   underline form on ink
   ===================================================================== */

.tv-ac {
  --tv-ac-header: 3.8rem;                       /* the solid bar: 61px desktop, 54px mobile */
  --tv-ac-rule: rgba(166, 138, 91, 0.42);       /* --hb-gold as a hairline on ivory */
  --tv-ac-rule-dark: rgba(200, 183, 156, 0.28); /* --hb-champagne as a hairline on ink */
  --tv-ac-num: 4.75rem;                         /* the gutter that holds the rule and the numeral */
}

/* Brass small type on the light grounds (4.9:1 on ivory) */
.tv-ac .hb-section--ivory .hb-eyebrow,
.tv-ac .hb-section--white .hb-eyebrow { color: var(--tv-brass-text); }

/* ---------------------------------------------------------------------
   1 · HERO — a terrace on the Nile behind the title, under a charcoal
   wash; the direct answer sits in a brass-ruled box at the right.
   ------------------------------------------------------------------- */
.tv-ac-hero { position: relative; isolation: isolate; overflow: hidden; padding: 0; }
.tv-ac-hero__media { position: absolute; inset: var(--tv-ac-header) 0 0; z-index: -1; overflow: hidden; background: var(--hb-ink); }
.tv-ac-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.tv-ac-hero__media::after {
  content: ""; position: absolute; inset: -1px;
  background:
    linear-gradient(90deg, rgba(21, 21, 21, 0.9) 0%, rgba(21, 21, 21, 0.8) 30%, rgba(21, 21, 21, 0.56) 52%, rgba(21, 21, 21, 0.5) 100%),
    linear-gradient(180deg, rgba(21, 21, 21, 0.55) 0%, rgba(21, 21, 21, 0.1) 30%, rgba(21, 21, 21, 0.1) 60%, rgba(21, 21, 21, 0.7) 100%);
}
.tv-ac-hero__inner {
  display: flex; flex-direction: column;
  min-height: clamp(34rem, 27rem + 13vw, 42rem);
  padding-top: calc(var(--tv-ac-header) + clamp(1.5rem, 1rem + 1.8vw, 2.75rem));
  padding-bottom: clamp(2.75rem, 2rem + 2.6vw, 4.5rem);
}
.tv-ac-hero .hub-crumbs { margin-bottom: clamp(1rem, 2.4vw, 2rem); }
.tv-ac-hero .hub-crumbs li { min-height: 2.75rem; }
.tv-ac-hero .hub-crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; border-bottom: 0; }
.tv-ac-hero .hub-crumbs a:hover, .tv-ac-hero .hub-crumbs a:focus-visible { text-decoration: underline; text-underline-offset: 0.35em; }
.tv-ac-hero__grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(2rem, 5vw, 6rem); align-items: center;
}
.tv-ac-hero .hb-kicker::after { background: var(--hb-gold); opacity: 1; }
.tv-ac-hero .hub-hero__title { font-size: clamp(2.7rem, 1.8rem + 3.3vw, 4.6rem); line-height: 1.02; max-width: 14ch; }
.tv-ac-hero .art-title-sub { margin-top: 1.2rem; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.8rem); }
.tv-ac-hero__panel { padding: 1.7rem 1.9rem 1.9rem; border: 1px solid var(--hb-gold); background: rgba(21, 21, 21, 0.74); }
.tv-ac-hero__panel .art-hero__label { margin-bottom: 0.9rem; font-size: 0.68rem; }
.tv-ac-hero__panel p { font-size: 0.98rem; line-height: 1.75; color: rgba(244, 240, 232, 0.92); max-width: none; }

@media (max-width: 1023.98px) {
  .tv-ac { --tv-ac-header: 3.375rem; --tv-ac-num: 3.25rem; }
  .tv-ac-hero__media img { object-position: 60% 50%; }
  .tv-ac-hero__media::after {
    background: linear-gradient(180deg, rgba(21, 21, 21, 0.74) 0%, rgba(21, 21, 21, 0.7) 40%, rgba(21, 21, 21, 0.86) 70%, rgba(21, 21, 21, 0.94) 100%);
  }
  .tv-ac-hero__inner { min-height: 0; }
  .tv-ac-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 3rem); align-items: start; }
  .tv-ac-hero .hub-hero__title { max-width: 14ch; }
  .tv-ac-hero__panel { max-width: 36rem; }
}
@media (max-width: 599.98px) {
  .tv-ac-hero__panel { padding: 1.35rem 1.25rem 1.5rem; }
}

/* ---------------------------------------------------------------------
   2 + 4 · COUNTED ITEMS — heading left, an ordered list right. Each item
   hangs off a short brass rule with its number beside it; hairlines
   between items. The numbers are CSS counters; the list is an <ol>.
   ------------------------------------------------------------------- */
.tv-ac .art-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 7vw, 8rem); }
.tv-ac .art-split__head .hb-heading--h2 { max-width: 12ch; }

.tv-ac-list { counter-reset: tv-ac-item; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--tv-ac-rule); }
.tv-ac-item {
  position: relative; counter-increment: tv-ac-item;
  padding: clamp(1.6rem, 2.6vw, 2.2rem) 0 clamp(1.6rem, 2.6vw, 2.2rem) var(--tv-ac-num);
  border-top: 1px solid var(--tv-ac-rule);
}
.tv-ac-item:first-child { border-top: 0; padding-top: 0.2rem; }
.tv-ac-item::before {                                  /* the rule */
  content: ""; position: absolute; left: 0; top: clamp(1.6rem, 2.6vw, 2.2rem); bottom: clamp(1.6rem, 2.6vw, 2.2rem);
  width: 1px; background: var(--hb-gold);
}
.tv-ac-item:first-child::before { top: 0.2rem; }
.tv-ac-item::after {                                   /* the number */
  content: counter(tv-ac-item, decimal-leading-zero) / "";
  position: absolute; left: 1.5rem; top: calc(clamp(1.6rem, 2.6vw, 2.2rem) + 0.45rem);
  font-family: var(--hb-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1; color: var(--tv-brass-text);
}
.tv-ac-item:first-child::after { top: 0.65rem; }
.tv-ac-item h3 { margin: 0 0 0.6rem; font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem); line-height: 1.2; color: var(--hb-ink); }
.tv-ac-item p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--hb-text-dim); max-width: 58ch; }
.tv-ac-item p + p { margin-top: 0.9rem; }
.tv-ac-item__lead, .tv-ac-lead {
  font-family: var(--hb-serif); font-weight: 400; color: var(--hb-ink); text-wrap: balance;
}
.tv-ac-item p.tv-ac-item__lead { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.05rem); line-height: 1.24; color: var(--hb-ink); max-width: 27ch; }
.tv-ac-item a, .tv-ac .art-note a {
  color: var(--tv-brass-text); text-decoration: underline; text-decoration-color: var(--hb-gold);
  text-decoration-thickness: 1px; text-underline-offset: 0.28em; border-bottom: 0;
  transition: color 0.25s var(--hb-ease), text-decoration-color 0.25s var(--hb-ease);
}
.tv-ac-item a:hover, .tv-ac-item a:focus-visible { color: var(--hb-ink); text-decoration-color: var(--hb-ink); }
.tv-ac-item a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }

/* 4 · the brief: the statement stands above the list, the four questions are set larger, counted in serif */
.tv-ac-lead { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem); line-height: 1.18; max-width: 20ch; }
.tv-ac-list--brief { border-top: 1px solid var(--tv-ac-rule); }
.tv-ac-list--brief .tv-ac-item:first-child { padding-top: clamp(1.6rem, 2.6vw, 2.2rem); }
.tv-ac-list--brief .tv-ac-item:first-child::before { top: clamp(1.6rem, 2.6vw, 2.2rem); }
.tv-ac-list--brief .tv-ac-item::after,
.tv-ac-list--brief .tv-ac-item:first-child::after {
  top: calc(clamp(1.6rem, 2.6vw, 2.2rem) - 0.05rem); left: 1.25rem;
  font-family: var(--hb-serif); font-style: italic; font-weight: 400; font-size: 1.7rem; letter-spacing: 0;
}
.tv-ac-list--brief .tv-ac-item h3 { font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.05rem); margin-bottom: 0.7rem; }

@media (max-width: 1023.98px) {
  .tv-ac .art-split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .tv-ac .art-split__head .hb-heading--h2 { max-width: 16ch; }
  .tv-ac-item::after { left: 1rem; }
  .tv-ac-list--brief .tv-ac-item::after, .tv-ac-list--brief .tv-ac-item:first-child::after { left: 0.9rem; font-size: 1.45rem; top: calc(clamp(1.6rem, 2.6vw, 2.2rem) + 0.05rem); }
}

/* ---------------------------------------------------------------------
   3 · THE HOTEL BRANDS — ten equal cells inside one hairline frame. The
   logo files are already white on transparent; nothing recolours them.
   ------------------------------------------------------------------- */
.tv-ac-brands-sec .hb-intro { max-width: 38rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tv-ac-brands-sec .hb-kicker::after { background: var(--hb-gold); opacity: 1; }
.art-brands.tv-ac-brands { border: 0; gap: 1px; padding: 1px; background: var(--tv-ac-rule-dark); }
.tv-ac-brands li {
  position: relative; gap: 0.6rem; justify-content: center;
  padding: clamp(1.25rem, 2.2vw, 1.9rem) 0.75rem clamp(1.1rem, 1.8vw, 1.5rem);
  border: 0 !important; background: var(--hb-ink);
  transition: background-color 0.3s var(--hb-ease);
}
.tv-ac-brands li::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--hb-gold); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--hb-ease); }
.tv-ac-brands li:hover { background: #1b1a18; }
.tv-ac-brands li:hover::after { opacity: 1; }
.tv-ac-brands img { width: 150px; aspect-ratio: 4 / 3; object-fit: contain; opacity: 0.95; }
.tv-ac-brands .art-brands__name { font-size: 0.64rem; letter-spacing: 0.22em; transition: color 0.3s var(--hb-ease); }
.tv-ac-brands li:hover .art-brands__name { color: #fff; }
@media (max-width: 1023.98px) { .tv-ac-brands img { width: 118px; } }
@media (max-width: 719.98px) {
  .art-brands.tv-ac-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-ac-brands img { width: 132px; }
}

/* ---------------------------------------------------------------------
   4b · WHERE CLIENTS STAY — Mena House across the measure, four equal
   photographs beneath; name left, place right, under a hairline.
   ------------------------------------------------------------------- */
.tv-ac-stay { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.tv-ac-stay .hb-kicker { margin-bottom: 1.5rem; }
.tv-ac-stay .art-fleet { gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 1.8vw, 1.5rem); }
.tv-ac-stay .art-fleet img { border-radius: 0; }
.tv-ac-stay .art-fleet__item--lead img { aspect-ratio: 16 / 6.2; object-position: 50% 45%; }
.tv-ac-stay .art-fleet__item:not(.art-fleet__item--lead) img { aspect-ratio: 3 / 2; }
.tv-ac-stay .art-fleet figcaption { margin-top: 0; padding: 0.85rem 0 0.8rem; border-top: 0; border-bottom: 1px solid var(--tv-ac-rule); font-size: 1.25rem; }
.tv-ac-stay .art-fleet__item--lead figcaption { font-size: 1.55rem; }
.tv-ac-stay .art-fleet figcaption span { font-size: 0.64rem; letter-spacing: 0.22em; color: var(--tv-brass-text); }
.tv-ac-stay .art-note { max-width: 46rem; margin-top: 1.6rem; }
@media (max-width: 1023.98px) {
  .tv-ac-stay .art-fleet__item--lead img { aspect-ratio: 16 / 8; }
}
@media (max-width: 599.98px) {
  /* stays two across: the place sits under the name */
  .tv-ac-stay .art-fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-ac-stay .art-fleet__item--lead img { aspect-ratio: 4 / 3; object-position: 78% 50%; }
  .tv-ac-stay .art-fleet__item:not(.art-fleet__item--lead) figcaption { flex-direction: column; gap: 0.3rem; font-size: 1.1rem; }
}

/* ---------------------------------------------------------------------
   5 · QUESTIONS — native <details>; the plus becomes a minus, the answer
   fades in. The whole question row is the 44px+ target.
   ------------------------------------------------------------------- */
.tv-ac-faq .hb-faq { border-top-color: var(--tv-ac-rule); }
.tv-ac-faq .hb-faq__item { padding: 0; border-bottom-color: var(--tv-ac-rule); }
.tv-ac-faq .hb-faq__item > summary { min-height: 2.75rem; padding: 1.35rem 0; transition: color 0.25s var(--hb-ease); }
.tv-ac-faq .hb-faq__item > summary::after { color: var(--tv-brass-text); transition: none; }
.tv-ac-faq .hb-faq__item[open] > summary::after { content: "\2212"; transform: none; }
.tv-ac-faq .hb-faq__item > p { margin: 0; padding: 0 2.5rem 1.6rem 0; font-size: 1rem; line-height: 1.75; color: var(--hb-text); max-width: 64ch; }
.tv-ac-faq .hb-faq__item[open] > p { animation: tv-ac-fade 0.28s var(--hb-ease) both; }
@keyframes tv-ac-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   6 · BRIEF — underline fields on ink, champagne button
   ------------------------------------------------------------------- */
.tv-ac-brief .hb-kicker::after { background: var(--hb-gold); opacity: 1; }
.tv-ac-brief .art-form { gap: 1.9rem clamp(1.5rem, 3vw, 2.5rem); padding-top: 1.75rem; border-top: 1px solid var(--tv-ac-rule-dark); }
.tv-ac-brief .art-form label { font-size: 0.68rem; }
.tv-ac-brief .art-form label i { color: rgba(244, 240, 232, 0.66); }
.tv-ac-brief .art-form input, .tv-ac-brief .art-form select, .tv-ac-brief .art-form textarea { border-bottom-color: rgba(244, 240, 232, 0.36); }
.tv-ac-brief .art-form input::placeholder, .tv-ac-brief .art-form textarea::placeholder { color: rgba(244, 240, 232, 0.58); }
.tv-ac-brief .art-form input:focus-visible, .tv-ac-brief .art-form select:focus-visible, .tv-ac-brief .art-form textarea:focus-visible { outline-color: var(--hb-champagne); }
.tv-ac-brief .art-form__submit { margin-top: 0.75rem; }
.tv-ac-brief .art-form__submit .hb-cta { min-height: 3rem; border-radius: 0; transition: background-color 0.25s var(--hb-ease), color 0.25s var(--hb-ease); }
.tv-ac-brief .art-enquiry__head .hb-link, .tv-ac-brief .hub-close__direct { display: inline-flex; align-items: center; justify-content: flex-start; align-self: flex-start; min-height: 2.75rem; }
.tv-ac-brief .art-enquiry__direct { margin-top: 0.75rem; }
.tv-ac-brief .art-enquiry__aside a { display: inline-block; padding: 0.6rem 0; }

@media (prefers-reduced-motion: reduce) {
  .tv-ac-faq .hb-faq__item[open] > p { animation: none !important; }
  .tv-ac-faq .hb-faq__item > summary, .tv-ac-brief .art-form__submit .hb-cta, .tv-ac-item a,
  .tv-ac-brands li, .tv-ac-brands li::after, .tv-ac-brands .art-brands__name { transition: none !important; }
}

/* Section rhythm: a little tighter than the hub default, as the page is six full sections long */
.tv-ac .hb-section { padding-block: clamp(4rem, 3.2rem + 4vw, 7.25rem); }