/* visitjubail.com additions on top of the cloned visitdammam.com stylesheets.
   Content pages are generated from Markdown by build.py, which emits plain lists,
   h3 cards and tables that the Dammam CSS never needed. Keep shared CSS untouched. */

/* Owner requirement 2026-10-07: text runs the full width of its container up to the right
   margin on desktop and mobile, no narrow text columns with empty space beside them.
   The Dammam CSS capped text at 640-800px inside a 1180px container. */
.page-hero-intro,
.section-title,
.content-lede,
.data-table,
.table-scroll .data-table,
.numbered-list,
.content-section .source-list,
.legal-prose,
.prose .legal-section,
.prose blockquote {
  max-width: none;
}

/* Contact page: form, address card and the PakkettenCentraal block (whose loader injects its own
   900px/640px caps after this file, hence the #pk-root specificity) also run full width. */
.cf-wrap,
.cf-sub,
.contact-card,
#pk-root .pk-wrap,
#pk-root .pk-guarantee {
  max-width: none;
}

/* Choose-buttons land on the form (plan-detail.js focusForm): keep it clear of the fixed header. */
.cf-wrap {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

.cf-wrap:focus {
  outline: none;
}

.cf-wrap:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 8px;
}

/* Clean line breaks: balanced headings, no orphan last word in paragraphs. */
h1, h2, h3, h4,
.page-hero-heading,
.section-title,
.tier-heading {
  text-wrap: balance;
}

p, li, figcaption, .poi-desc {
  text-wrap: pretty;
}

/* On narrow screens long words (place names, URLs) break neatly instead of overflowing. */
@media (max-width: 600px) {
  p, li, td, th, .poi-desc {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}

.prose > ul,
.prose > ol,
.prose .legal-section ul,
.prose .legal-section ol {
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--ink2);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
}

.prose > ul li,
.prose > ol li {
  margin-bottom: 8px;
}

.prose a {
  color: var(--accent-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-section h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.prose .legal-section .content-lede {
  font-size: 15px;
  margin-top: 0;
}

.prose .legal-section .content-lede + .content-lede {
  margin-top: 12px;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* At 320px the Dammam cell padding pushed tables 8-9px past the viewport. */
@media (max-width: 420px) {
  .data-table th,
  .data-table td {
    padding: 8px 8px;
    overflow-wrap: anywhere;
  }
}

/* Homepage hero: photo as full-bleed background (owner request 2026-10-07, cropping accepted).
   Lesson from visitabcoude.com: a fixed 100svh hero clips a long title and intro under the fixed
   header, so the hero grows with its content instead. Focus on the marina in the lower half. */
.hero {
  height: auto;
  min-height: 100svh;
}

.hero-media {
  object-position: 50% 68%;
}

.hero-content {
  padding-top: clamp(110px, 16vh, 150px);
}

.hero-subtitle {
  max-width: none;
}

/* Page heroes with a 2D illustration (scripts/make_hero_art.py). Same height and layers on every page.
   The art is decorative and drawn for slicing: the subject sits bottom-right and stays in view. */
.page-hero--art {
  min-height: 46vh;
  background-color: #071b21;
}

.page-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  z-index: 0;
}

/* Hero text runs full width (owner rule), so it can cross the illustration: shade the whole hero,
   strongest on the left and at the bottom where the intro sits. Contrast measured with
   scripts/hero_contrast.mjs (worst-case background behind the text). */
.page-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 27, 33, 0) 40%, rgba(7, 27, 33, 0.35) 100%),
    linear-gradient(90deg, rgba(7, 27, 33, 0.7) 0%, rgba(7, 27, 33, 0.35) 50%, rgba(7, 27, 33, 0.08) 100%);
}

@media (max-width: 760px) {
  .page-hero-art {
    object-position: 88% bottom;
  }

  .page-hero-shade {
    background: linear-gradient(180deg, rgba(7, 27, 33, 0.3) 0%, rgba(7, 27, 33, 0.78) 50%, rgba(7, 27, 33, 0.9) 100%);
  }
}

/* Section illustration strips (scripts/make_section_art.py): full content width under each H2.
   Decorative 2D art drawn with its subject centred, so a gentle side crop on wide or narrow screens
   loses nothing; the strip keeps a readable height on phones. */
.section-art {
  margin: 18px 0 8px;
  border-radius: var(--radius-xl, 8px);
  overflow: hidden;
  background: #0b2830;
}

.section-art img {
  display: block;
  width: 100%;
  height: clamp(150px, 22vw, 290px);
  object-fit: cover;
  object-position: center bottom;
}

/* Events & News: live headline list (news.js, assets/php/news-feed.php). */
.jb-news {
  margin: 36px 0 12px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 8px);
  background: var(--sand);
}

.jb-news-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.jb-news-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.jb-news-item:last-child {
  border-bottom: none;
}

.jb-news-meta {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--stone);
}

.jb-news-title {
  margin: 0;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.35;
}

.jb-news-title a {
  color: var(--ink);
  text-decoration: none;
}

.jb-news-title a:hover,
.jb-news-title a:focus-visible {
  color: var(--accent-600);
  text-decoration: underline;
}

.hero-credit {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 24px);
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  text-align: right;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-credit a {
  color: #fff;
  text-decoration: underline;
}

/* Six persona cards (Dammam has nine): 3 + 3 instead of 4 + 2 on desktop. */
.persona-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.prose blockquote {
  margin: 20px 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent-600);
  color: var(--ink2);
}

/* Legal links sit in the narrow fourth footer column: a vertical list like the other columns, instead of a
   piped row that broke mid-label ("Privacy / policy") or left a dangling "|" at 1024-1366 px. */
.footer-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.footer-meta > span {
  display: none;
}
.footer-meta a,
.footer-meta button {
  white-space: nowrap;
  font-size: 12px;
}

/* Six dock items like Dammam/Jeddah (owner 2026-10-09); Dammam truncates labels at 360 px and below. */
@media (max-width: 380px) {
  .dm-dock {
    gap: 0;
    padding-left: 2px;
    padding-right: 2px;
  }
  .dm-dock__item {
    padding: 5px 1px;
  }
  .dm-dock__item span {
    font-size: 8.5px;
    letter-spacing: 0;
  }
}

/* Opaque dock: at 97% the fixed header logo underneath showed through on mobile (2026-10-09). */
.dm-dock {
  background: rgb(255, 253, 248);
}

/* Dock items size to their label: with equal widths ADVERTISE had 1.8 px to spare at 390 px and showed
   "ADVERTI..." on a real iPhone (2026-10-09). Now every label has 12.9 px or more at 320-430 px. */
.dm-dock > *,
.dm-dock > .nav-dropdown {
  flex: 1 1 auto;
  min-width: 0;
}
.dm-dock .nav-dropdown > .dm-dock__item {
  width: 100%;
}

/* Voute ticker on mobile/tablet (collapsed by voute-ticker-default-state.js up to 1024 px): the shared ticker
   keeps 170 px body padding and floats its globe button 80 px up, which left a white strip under the footer and
   put the globe over the hero buttons (2026-10-09). Body padding goes to 0 and the dark footer keeps the room the
   globe needs, so no light strip remains (responsive QA 2026-10-10). The globe shows only after 480 px of
   scrolling, like .back-to-top, so it never sits on the hero buttons (html.vgt-scrolled, set in
   voute-ticker-default-state.js). */
@media (max-width: 1024px) {
  body:not(.vgt-active) {
    padding-bottom: 0 !important;
  }
  body:not(.vgt-active) .site-footer {
    padding-bottom: 96px;
  }
  #vgt-toggle-btn {
    bottom: 16px !important;
  }
  html:not(.vgt-scrolled) body:not(.vgt-active) #vgt-toggle-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}