/* ============================================================
   BLACK PEARL — INTERIOR PAGE DESIGN SYSTEM
   Loaded by every page EXCEPT index.html. Reuses the approved
   homepage's actual tokens and primitives so every interior page
   shares one component library with the homepage without ever
   touching index.html or css/homepage-experiment.css.

   Loaded after css/style.css. Restyles style.css's functional
   classes in place (buttons, forms, faq, directory, header/nav)
   rather than renaming them, since js/main.js targets those exact
   class names. Structural sections use the new hx-* primitives.

   Footer is intentionally left untouched — it already renders
   identically on the approved homepage via plain style.css, so
   leaving it alone here keeps it consistent across every page.
   ============================================================ */

:root{
  --hx-paper:#F1EFE9;
  --hx-ink:#171714;
  --hx-white:#FAFAF7;
  --hx-muted:#8f8c83;
  --hx-rule:rgba(23,23,20,.5);

  --hx-editorial:'Cormorant Garamond', Georgia, serif;

  --hx-max:1360px;
  --hx-margin:64px;
  --hx-gap:32px;

  --module-lg:72px;
  --module-md:56px;
  --module-sm:48px;
  --module-lg-m:44px;
  --module-md-m:36px;
  --module-sm-m:32px;
}

body.interior{background:var(--hx-paper);color:var(--hx-ink)}

/* ---------- Container ---------- */
.hx-container{max-width:var(--hx-max);margin:0 auto;padding:0 var(--hx-margin)}
@media(max-width:900px){.hx-container{padding:0 24px}}

/* ---------- Rules ---------- */
.hx-rule-top{border-top:1px solid var(--hx-rule)}
.hx-rule-bottom{border-bottom:1px solid var(--hx-rule)}

/* ---------- Type ---------- */
.hx-label{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--hx-muted);font-weight:500;display:block}
.hx-display{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;line-height:.96;font-size:clamp(30px,3.8vw,52px)}
.hx-display-sm{font-size:clamp(20px,2.2vw,26px)}
.hx-display-md{font-size:clamp(26px,3vw,36px)}
.hx-display-lg{font-size:clamp(36px,5vw,72px)}
.hx-h2-quiet{font-family:var(--hx-editorial);font-weight:400;line-height:1.15;letter-spacing:-0.005em;font-size:clamp(26px,2.6vw,36px)}
.hx-serif-quiet{font-family:var(--hx-editorial);font-style:italic;font-size:19px;line-height:1.5;color:var(--hx-ink);max-width:40em}
.hx-body{font-family:var(--body);font-size:16px;line-height:1.65;color:var(--hx-ink);max-width:34em}
.hx-body.wide{max-width:none}
.hx-quote-inline{font-family:var(--sans);font-style:italic;font-size:14px;line-height:1.55;color:var(--hx-muted);border-left:2px solid var(--hx-rule);padding-left:14px;max-width:32em}

.hx-link{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--hx-ink);border-bottom:1px solid rgba(23,23,20,.45);padding-bottom:3px;display:inline-flex;align-items:center;gap:8px;transition:border-color .3s ease,gap .3s ease}
.hx-link:hover{border-color:var(--hx-ink);gap:12px}

/* ---------- Grid ---------- */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--hx-gap);align-items:start}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-12{grid-column:1/-1}
@media(max-width:900px){
  .grid12{grid-template-columns:1fr;row-gap:0}
  .span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:1/-1}
}
.hx-divided{column-gap:0}
.hx-divided>[class^="span-"]{padding-right:calc(var(--hx-gap) / 2)}
.hx-divided>[class^="span-"]+[class^="span-"]{padding-left:calc(var(--hx-gap) / 2);padding-right:0;border-left:1px solid var(--hx-rule)}
@media(max-width:900px){
  .hx-divided>[class^="span-"]{padding:0}
  .hx-divided>[class^="span-"]+[class^="span-"]{padding-top:24px;margin-top:24px;padding-left:0;border-left:0;border-top:1px solid var(--hx-rule)}
}

/* ---------- Image ratios ---------- */
.hx-img-wrap{overflow:hidden;position:relative;display:block}
.hx-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.ratio-landscape{aspect-ratio:3/2}
.ratio-wide{aspect-ratio:16/9}

/* ---------- Section module padding ---------- */
.hx-module-lg{padding:var(--module-lg) 0}
.hx-module-md{padding:var(--module-md) 0}
.hx-module-sm{padding:var(--module-sm) 0}
@media(max-width:900px){
  .hx-module-lg{padding:var(--module-lg-m) 0}
  .hx-module-md{padding:var(--module-md-m) 0}
  .hx-module-sm{padding:var(--module-sm-m) 0}
}

/* ---------- Interior page header — ruled masthead, replaces .page-hero ---------- */
.hx-page-header{padding:132px 0 32px;background:var(--hx-paper);color:var(--hx-ink)}
.hx-page-header .hx-label{margin-bottom:8px}
.hx-page-header .hx-body{margin-top:16px}
@media(max-width:900px){.hx-page-header{padding:116px 0 28px}}

/* Optional media variant — scoped to .has-media only, every other page's plain
   .hx-page-header (About, Membership, Qatar Guide, Partners, Contact, Privacy, Terms)
   is untouched. Same padding/copy/layout, just a photograph behind it. */
.hx-page-header.has-media{position:relative;overflow:hidden;color:var(--hx-white)}
.hx-page-header.has-media .hx-page-media{position:absolute;inset:0;z-index:0}
.hx-page-header.has-media .hx-page-media img{width:100%;height:100%;object-fit:cover;display:block}
.hx-page-header.has-media .hx-page-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,23,20,.5),rgba(23,23,20,.8))}
.hx-page-header.has-media .hx-container{position:relative;z-index:1}
.hx-page-header.has-media .hx-label{color:rgba(250,250,247,.75)}
.hx-page-header.has-media .hx-display{color:var(--hx-white)}
.hx-page-header.has-media .hx-body{color:rgba(250,250,247,.85)}

/* ---------- Colour-field moments — the one shared way any interior page drops into a
   deliberate burgundy/forest section. Mirrors homepage-experiment.css's identical private
   copy so both the homepage and every interior page reuse one definition instead of two. ---------- */
.hx-field-forest,.hx-field-burgundy{color:var(--hx-white)}
.hx-field-forest{background:var(--forest)}
.hx-field-burgundy{background:var(--burgundy)}
.hx-field-forest.hx-rule-top,.hx-field-burgundy.hx-rule-top{border-top-color:rgba(250,250,247,.18)}
.hx-field-forest.hx-rule-bottom,.hx-field-burgundy.hx-rule-bottom{border-bottom-color:rgba(250,250,247,.18)}
.hx-field-forest .hx-label,.hx-field-burgundy .hx-label{color:rgba(250,250,247,.6)}
.hx-field-forest .hx-display,.hx-field-burgundy .hx-display,
.hx-field-forest .hx-h2-quiet,.hx-field-burgundy .hx-h2-quiet{color:var(--hx-white)}
.hx-field-forest .hx-body,.hx-field-burgundy .hx-body{color:rgba(250,250,247,.82)}
.hx-field-forest .hx-serif-quiet,.hx-field-burgundy .hx-serif-quiet{color:var(--hx-white)}
.hx-field-forest .hx-link,.hx-field-burgundy .hx-link{color:var(--hx-white);border-bottom-color:rgba(250,250,247,.45)}
.hx-field-forest .hx-link:hover,.hx-field-burgundy .hx-link:hover{border-color:var(--champagne);color:var(--champagne)}
.hx-field-forest .entry-label,.hx-field-burgundy .entry-label{color:rgba(250,250,247,.55)}
.hx-field-forest .entry-name,.hx-field-burgundy .entry-name{color:var(--hx-white)}
.hx-field-forest .hx-cells,.hx-field-burgundy .hx-cells{border-top-color:rgba(250,250,247,.18);border-left-color:rgba(250,250,247,.18)}
.hx-field-forest .hx-cell,.hx-field-burgundy .hx-cell{border-right-color:rgba(250,250,247,.18);border-bottom-color:rgba(250,250,247,.18)}
body.interior .hx-field-forest .btn-secondary,body.interior .hx-field-burgundy .btn-secondary{color:var(--hx-white);border-color:rgba(250,250,247,.5)}
body.interior .hx-field-forest .btn-secondary:hover,body.interior .hx-field-burgundy .btn-secondary:hover{background:var(--hx-white);color:var(--hx-ink)}

/* ---------- Third dark-field variant: black, for the darker-theme prototype ----------
   Purely additive — mirrors .hx-field-forest/.hx-field-burgundy above exactly, just a
   third colour option. Nothing here changes unless a section opts in with this class. */
.hx-field-black{background:var(--hx-ink);color:var(--hx-white)}
.hx-field-black.hx-rule-top{border-top-color:rgba(250,250,247,.18)}
.hx-field-black.hx-rule-bottom{border-bottom-color:rgba(250,250,247,.18)}
.hx-field-black .hx-label{color:rgba(250,250,247,.6)}
.hx-field-black .hx-display,.hx-field-black .hx-h2-quiet{color:var(--hx-white)}
.hx-field-black .hx-body{color:rgba(250,250,247,.82)}
.hx-field-black .hx-serif-quiet{color:var(--hx-white)}
.hx-field-black .hx-link{color:var(--hx-white);border-bottom-color:rgba(250,250,247,.45)}
.hx-field-black .hx-link:hover{border-color:var(--champagne);color:var(--champagne)}
.hx-field-black .entry-label{color:rgba(250,250,247,.55)}
.hx-field-black .entry-name{color:var(--hx-white)}
.hx-field-black .hx-cells{border-top-color:rgba(250,250,247,.18);border-left-color:rgba(250,250,247,.18)}
.hx-field-black .hx-cell{border-right-color:rgba(250,250,247,.18);border-bottom-color:rgba(250,250,247,.18)}
body.interior .hx-field-black .btn-secondary{color:var(--hx-white);border-color:rgba(250,250,247,.5)}
body.interior .hx-field-black .btn-secondary:hover{background:var(--hx-white);color:var(--hx-ink)}

/* ---------- Bordered module grid — shared hairlines, no doubled borders ---------- */
.hx-cells{display:grid;border-top:1px solid var(--hx-rule);border-left:1px solid var(--hx-rule)}
.hx-cells.cols-2{grid-template-columns:1fr 1fr}
.hx-cells.cols-3{grid-template-columns:repeat(3,1fr)}
.hx-cells.cols-4{grid-template-columns:repeat(4,1fr)}
.hx-cell{border-right:1px solid var(--hx-rule);border-bottom:1px solid var(--hx-rule);padding:28px}
.hx-cell-full{grid-column:1/-1}
.hx-cell .entry-label{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-muted)}
.hx-cell .entry-name{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;font-size:clamp(19px,1.8vw,23px);margin:10px 0 14px}
.hx-cell .hx-body{margin:8px 0 14px}
.hx-cell ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:14px 0;padding:0}
.hx-cell ul li{font-size:14px;color:var(--hx-muted);padding-left:16px;position:relative}
.hx-cell ul li:before{content:"\2014";position:absolute;left:0;color:var(--hx-ink)}
.hx-cell.featured{background:var(--hx-ink);color:var(--hx-white)}
.hx-cell.featured .entry-label,.hx-cell.featured .hx-muted-txt{color:rgba(250,250,247,.55)}
.hx-cell.featured .hx-body,.hx-cell.featured ul li{color:rgba(250,250,247,.75)}
.hx-cell.featured ul li:before{color:var(--hx-white)}
.hx-cell.featured .entry-name{color:var(--hx-white)}
@media(max-width:900px){.hx-cells.cols-2,.hx-cells.cols-3,.hx-cells.cols-4{grid-template-columns:1fr}}

/* ---------- Equal image grid — N equal columns, aligned edges, hard dividers ---------- */
.hx-image-grid{display:grid;column-gap:0}
.hx-image-grid.cols-2{grid-template-columns:1fr 1fr}
.hx-image-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.hx-image-grid .img-col{padding-right:calc(var(--hx-gap) / 2)}
.hx-image-grid .img-col+.img-col{padding-left:calc(var(--hx-gap) / 2);padding-right:0;border-left:1px solid var(--hx-rule)}
.hx-image-grid.cols-3.wrap-rows .img-col:nth-child(n+4){margin-top:var(--hx-gap);padding-top:var(--hx-gap);border-top:1px solid var(--hx-rule)}
@media(max-width:700px){
  .hx-image-grid.cols-2,.hx-image-grid.cols-3{grid-template-columns:1fr;row-gap:20px}
  .hx-image-grid .img-col{padding:0}
  .hx-image-grid .img-col+.img-col{padding:20px 0 0;border-left:0;border-top:1px solid var(--hx-rule);margin-top:0}
}

/* ================= Restyle existing functional classes ================= */

/* Header / nav — match the approved homepage's quiet treatment */
body.interior header{padding:30px 0}
body.interior .navwrap{max-width:var(--hx-max);padding:0 var(--hx-margin)}
body.interior nav.desktop-nav{gap:34px}
body.interior nav.desktop-nav a{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-family:var(--sans)}
body.interior .desktop-nav .btn.nav-cta{background:none!important;border:0!important;padding:0!important;text-decoration:none;position:relative;color:inherit!important}
body.interior .desktop-nav .btn.nav-cta:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;opacity:.5}
body.interior header.scrolled{background:var(--hx-paper);box-shadow:none;border-bottom:1px solid var(--hx-rule)}
@media(max-width:700px){body.interior .navwrap{padding:0 20px}}

/* Buttons — bordered rectangle, condensed sans label, no fill by default */
body.interior .btn{border-radius:0;font-weight:600;letter-spacing:.07em;padding:14px 26px}
body.interior .btn-primary{background:var(--hx-ink);color:var(--hx-white);border:1px solid var(--hx-ink)}
body.interior .btn-primary:hover{background:transparent;color:var(--hx-ink)}
body.interior .btn-secondary{background:transparent;color:var(--hx-ink);border:1px solid var(--hx-ink)}
body.interior .btn-secondary:hover{background:var(--hx-ink);color:var(--hx-white)}
body.interior .btn-onlight-primary,body.interior .btn-ondark-primary{background:transparent;color:var(--hx-white);border:1px solid rgba(250,250,247,.5)}
body.interior .btn-onlight-primary:hover,body.interior .btn-ondark-primary:hover{background:var(--hx-white);color:var(--hx-ink)}
body.interior .btn-ondark-secondary{background:transparent;color:var(--hx-white);border:1px solid rgba(250,250,247,.4)}

/* Forms — hairline borders, no radius, matches the ruled system */
body.interior .app-form input,body.interior .app-form select,body.interior .app-form textarea{
  border-radius:0;border:1px solid var(--hx-rule);background:var(--hx-paper)
}
body.interior .app-form input:focus,body.interior .app-form select:focus,body.interior .app-form textarea:focus{outline:1px solid var(--hx-ink);outline-offset:0}
body.interior .app-form label{color:var(--hx-muted)}

/* FAQ accordion */
body.interior .faq-item{border-top:1px solid var(--hx-rule)}
body.interior .faq-item:last-child{border-bottom:1px solid var(--hx-rule)}
body.interior .faq-q{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-0.005em;text-transform:none}
body.interior .faq-a p{color:var(--hx-muted)}

/* Community Directory */
body.interior .directory-search input,body.interior .filter-field select{border-radius:0;border:1px solid var(--hx-rule);background:var(--hx-paper)}
body.interior .directory-search input:focus,body.interior .filter-field select:focus{outline:1px solid var(--hx-ink)}
body.interior .member-card{border-radius:0;border:1px solid var(--hx-rule);background:var(--hx-paper);box-shadow:none}
body.interior .member-card:hover{transform:none;box-shadow:none;border-color:var(--hx-ink)}
body.interior .member-card h3{font-family:var(--hx-editorial)}
.member-view-profile{display:block;margin-top:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--hx-muted);transition:color .25s ease}
.member-card:hover .member-view-profile{color:var(--hx-ink)}

/* Directory preview — Membership page's capped, search-only teaser of the full directory */
.directory-preview .directory-controls{margin-bottom:28px}
.directory-preview .directory-search{max-width:420px;flex:none}
.directory-preview .directory-grid{grid-template-columns:repeat(3,1fr);margin-top:0}
@media(max-width:900px){.directory-preview .directory-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.directory-preview .directory-grid{grid-template-columns:1fr}}
body.interior .interest-filter-btn{border-radius:0;border:1px solid var(--hx-rule);background:var(--hx-paper)}
body.interior .interest-filter-btn.active{background:var(--hx-ink);border-color:var(--hx-ink)}
body.interior .profile-modal{border-radius:0;background:var(--hx-paper)}
body.interior .profile-modal-close{border-radius:0;border:1px solid var(--hx-rule);background:var(--hx-paper)}

/* Qatar Guide search / quicklinks / tiles */
body.interior .guide-search input{border-radius:0;border:1px solid rgba(250,250,247,.3)}
body.interior .quicklink{border-radius:0}
body.interior .guide-nav{background:var(--hx-paper);border-bottom:1px solid var(--hx-rule)}
body.interior .guide-nav a{border-radius:0;border:1px solid var(--hx-rule);color:var(--hx-ink)}
body.interior .guide-nav a:hover{border-color:var(--hx-ink);color:var(--hx-ink)}
body.interior .tile{border-radius:0}