/* ---- Ship cruises sold from the ship's own calendar: Raja Ampat (Aqua Blu),
   French Polynesia (Aranui 5) and the Brahmaputra (RV Kindat Pandaw).

   The pages follow the Laos River Cruise and Peruvian Amazon Cruise pages:
   the hero photograph as a real image, the ship with its cabins and deck
   plans, days aboard and ashore, the galley, the ship's own photographs, and
   every sailing with its price per cabin. These rules only add what the
   shared expedition.css and wpj-redesign.css do not know, with their tokens,
   padding and breakpoints, so this sheet loads after both. ---- */

/* The hero photograph as a real image, so the ship holds its place at every width. */
body.wpj-expedition #hero .oc-hero-bg { filter: none; background-image: none !important; }
.oc-hero-picture, .oc-hero-picture img { display: block; width: 100%; height: 100%; }
.oc-hero-picture img { object-fit: cover; object-position: var(--hero-pos, center 45%); }
@media (min-width: 901px) {
  .oc-hero-picture img { object-position: var(--hero-pos-dx, center) var(--hero-pos-dy, center); }
}

/* The text beside the overview and ship photographs runs longer than they do,
   so on a wide screen the photographs stay in view while it is read. */
@media (min-width: 901px) {
  #overview .intro-image-wrap, #ship .intro-grid > .fade-in-right, #cuisine .intro-grid > .fade-in-right { position: sticky; top: 140px; }
}
#overview .intro-image-wrap img { height: auto; aspect-ratio: var(--ov-ar, 4 / 5); object-fit: cover; }
/* Seven links fit the sub-nav from about 560px wide; on a phone Photos and
   Sailings step aside and the bar keeps the cruise's five. */
@media (max-width: 559px) { .wpj-subnav-inner > a[href="#photos"], .wpj-subnav-inner > a[href="#sailings"] { display: none; } }

/* Routes: one tab each, two by two on a wide screen when there are four. */
#itinerary .itinerary-header { margin-bottom: 2rem; }
#itinerary .tier-selector { margin-bottom: 2rem; }
@media (min-width: 901px) {
  #itinerary .tier-selector.oc-tiers-4 { display: grid; grid-template-columns: 1fr 1fr; }
  #itinerary .tier-selector.oc-tiers-4 .tier-btn:nth-child(2n) { border-right: none; }
  #itinerary .tier-selector.oc-tiers-4 .tier-btn:nth-child(-n+2) { border-bottom: 1px solid rgba(196, 148, 74, .3); }
}

/* Sections the shared sheet has no rule for. */
body.wpj-expedition #ship, body.wpj-expedition #activities, body.wpj-expedition #cuisine, body.wpj-expedition #sailings { scroll-margin-top: 122px; }
@media (max-width: 640px) { body.wpj-expedition #ship, body.wpj-expedition #activities, body.wpj-expedition #cuisine, body.wpj-expedition #sailings { scroll-margin-top: 114px; } }
#ship, #cuisine, #sailings { background: var(--sand); color: var(--charcoal); padding: 7rem 0; }
#activities { background: var(--charcoal); padding: 7rem 0; }
#sailings + #details { border-top: 1px solid rgba(134, 97, 47, .2); }

/* The shared sheet makes <picture> display:contents, which would turn each
   <source> into a grid item of its own. */
.oc-ship-photos picture, .oc-cabin picture, .oc-act-card picture, .oc-dishes picture { display: block; }
.oc-ship-photos source, .oc-cabin source, .oc-act-card source, .oc-dishes source { display: none; }

/* The ship: four photographs beside the text, then her numbers. */
.oc-ship-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oc-ship-photos img { width: 100%; height: 230px; object-fit: cover; display: block; }
.oc-caption { font-family: 'Source Sans 3', sans-serif; font-size: .82rem; letter-spacing: .06em; color: var(--gold-dark); margin-top: .8rem; }
.oc-stats { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: 3.5rem; border-top: 1px solid rgba(134, 97, 47, .25); border-bottom: 1px solid rgba(134, 97, 47, .25); }
.oc-stats div { padding: 1.6rem 1rem; text-align: center; }
.oc-stats div + div { border-left: 1px solid rgba(134, 97, 47, .25); }
.oc-stat-n { display: block; font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; color: var(--charcoal); font-variant-numeric: lining-nums; }
.oc-stat-l { display: block; margin-top: .5rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark); }

/* Cabins: a card per category, its photograph, size, beds and where it is. */
.oc-cabins { margin-top: 4.5rem; scroll-margin-top: 130px; }
.oc-cabins .section-label, .oc-sail-head .section-label { color: var(--gold-dark); display: block; margin-bottom: .9rem; }
.oc-cabins-title { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; color: var(--charcoal); margin-bottom: 1rem; line-height: 1.2; }
.oc-cabins-intro { max-width: 780px; color: rgba(26, 26, 26, .82); line-height: 1.75; margin-bottom: 1.8rem; }
.oc-cabin-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.oc-cabin { border: 1px solid rgba(26, 26, 26, .12); background: rgba(255, 255, 255, .4); display: flex; flex-direction: column; }
.oc-cabin img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.oc-cabin-body { padding: 1.2rem 1.3rem 1.35rem; }
.oc-cabin-name { font-family: 'Playfair Display', serif; font-size: 1.22rem; font-weight: 600; color: var(--charcoal); margin: 0 0 .3rem; line-height: 1.25; }
.oc-cabin-meta { font-size: .78rem; letter-spacing: .06em; color: var(--gold-dark); font-weight: 600; margin: 0 0 .7rem; line-height: 1.5; }
.oc-cabin-desc { font-size: .93rem; line-height: 1.65; color: rgba(26, 26, 26, .82); margin: 0; }
.oc-cabin-feats { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.oc-cabin-feats li { position: relative; padding-left: 1rem; font-size: .88rem; line-height: 1.5; color: rgba(26, 26, 26, .78); }
.oc-cabin-feats li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--gold-dark); opacity: .7; }
.oc-cabin-note { font-size: .9rem; color: #5a5347; margin-top: 1.2rem; line-height: 1.65; max-width: 900px; }

/* Deck plans: one deck at a time under tabs, each plate opening full size. */
.oc-decks { margin-top: 4.5rem; padding-top: 2rem; border-top: 1px solid rgba(134, 97, 47, .25); scroll-margin-top: 130px; }
.oc-decks-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.oc-decks-title { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--charcoal); margin: 0; }
.oc-decks-intro { font-size: .9rem; color: #655e53; margin: 0; }
.oc-deck-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid rgba(134, 97, 47, .25); margin-bottom: 1.2rem; }
.oc-deck-tabs button { font: inherit; font-size: .88rem; min-height: 44px; padding: .65rem 1rem; color: #655e53; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.oc-deck-tabs button[aria-selected="true"] { color: #262520; border-bottom-color: #86612f; font-weight: 600; }
.oc-deck-tabs button:focus-visible, .oc-plan-open:focus-visible, .oc-deck-panel:focus-visible { outline: 2px solid #86612f; outline-offset: 3px; }
.oc-deck-panel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 2rem; align-items: center; }
.oc-deck-panel[hidden] { display: none; }
.oc-deck-panel.oc-deck-wide { grid-template-columns: 1fr; }
.oc-plan-open { display: block; cursor: zoom-in; background: #fff; }
.oc-plan-open img { display: block; width: 100%; height: auto; }
.oc-deck-text h4 { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600; margin: 0 0 .6rem; color: var(--charcoal); }
.oc-deck-text p { margin: 0; font-size: .95rem; line-height: 1.7; color: rgba(26, 26, 26, .82); }
.oc-deck-text a { display: inline-flex; align-items: center; min-height: 44px; color: #86612f; font-size: .85rem; font-weight: 600; text-underline-offset: 4px; }

/* A line under a route's days, and the words above the days ashore. */
.oc-itin-note { max-width: 860px; margin: 2rem auto 0; font-size: .92rem; line-height: 1.7; color: var(--text-muted); text-align: center; }
.oc-act-intro { max-width: 760px; margin: 0 auto 3rem; text-align: center; color: var(--text-muted); line-height: 1.75; font-size: 1rem; }

/* Days aboard and ashore: square tiles with their names under them. */
.oc-act-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: rgba(196, 148, 74, .15); border: 1px solid rgba(196, 148, 74, .15); }
.oc-act-card { background: var(--charcoal); display: flex; flex-direction: column; transition: background .3s ease; }
.oc-act-card:hover { background: #222018; }
.oc-act-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.oc-act-body { padding: 1.3rem 1.5rem 1.7rem; }
.oc-act-title { font-family: 'Playfair Display', serif; font-size: 1.12rem; font-weight: 600; color: var(--sand); margin-bottom: .5rem; line-height: 1.3; }
.oc-act-desc { font-size: .92rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* The galley: dishes beside the text. */
.oc-dishes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oc-dishes figure { margin: 0; }
.oc-dishes img { width: 100%; height: 210px; object-fit: cover; display: block; }
.oc-dishes figcaption { font-size: .8rem; line-height: 1.45; color: #5a5347; margin-top: .45rem; }

/* Sailings: a table per route, a row per sailing, a price per cabin category.
   On a phone each row becomes a card, its prices under their own captions
   (from the cells' data-label), instead of a sideways scroll. "Sold out" and
   "On request" stand in the price's place; "Last cabin" or "Last suite" means
   one left in that category when the ship's calendar was read. */
.oc-sail-head { text-align: center; margin-bottom: 2.6rem; }
.oc-sail-head .section-title { color: var(--charcoal); font-size: clamp(2rem, 4vw, 2.8rem); }
.oc-sail-head .gold-line { margin: 1.2rem auto; background: var(--gold-dark); }
.oc-sail-intro { max-width: 760px; margin: 0 auto; color: rgba(26, 26, 26, .78); line-height: 1.7; font-size: .98rem; }
.oc-sail-routes { display: grid; gap: 2.8rem; }
.oc-sail-route h3 { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 600; color: var(--charcoal); margin: 0 0 .25rem; line-height: 1.25; }
.oc-sail-route .oc-sail-sub { font-size: .9rem; color: #5a5347; margin: 0 0 1rem; line-height: 1.55; }
.oc-sail-wrap { border: 1px solid rgba(26, 26, 26, .12); background: rgba(255, 255, 255, .4); }
.oc-rate-table { width: 100%; border-collapse: collapse; font-family: 'Source Sans 3', sans-serif; font-size: .97rem; color: var(--charcoal); }
.oc-rate-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.oc-rate-table th { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark); text-align: left; padding: .85rem 1rem; border-bottom: 1px solid rgba(26, 26, 26, .2); background: rgba(26, 26, 26, .035); vertical-align: bottom; line-height: 1.35; }
.oc-rate-table th.oc-price { text-align: right; }
.oc-rate-table td { padding: .8rem 1rem; border-bottom: 1px solid rgba(26, 26, 26, .08); vertical-align: top; line-height: 1.45; }
.oc-rate-table tbody tr:last-child td { border-bottom: 0; }
.oc-rate-table .oc-when { font-family: 'Playfair Display', serif; font-size: 1.04rem; white-space: nowrap; }
.oc-rate-table .oc-when small { display: block; font-family: 'Source Sans 3', sans-serif; font-size: .8rem; color: #5a5347; white-space: normal; margin-top: .1rem; }
.oc-rate-table td.oc-price { font-family: 'Playfair Display', serif; font-size: 1.06rem; text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.oc-rate-table td.oc-gone { color: #7a7266; font-family: 'Source Sans 3', sans-serif; font-size: .86rem; }
.oc-rate-table .oc-left { display: block; font-family: 'Source Sans 3', sans-serif; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #86612F; margin-top: .15rem; }
.oc-rate-table .oc-ask { font-family: 'Source Sans 3', sans-serif; font-size: .86rem; color: #5a5347; }
.oc-sail-note { font-size: .9rem; color: #5a5347; margin: 1.6rem auto 0; line-height: 1.65; max-width: 900px; }
.oc-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) {
  .oc-cabin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .oc-ship-photos, .oc-dishes { margin-top: 2rem; }
  .oc-act-grid { grid-template-columns: repeat(2, 1fr); }
  .oc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-stats div:nth-child(odd) { border-left: 0; }
  .oc-stats div:nth-child(n+3) { border-top: 1px solid rgba(134, 97, 47, .25); }
}
/* A sailings table of more than three cabins (.oc-wide) does not fit a tablet held
   upright, so it takes the phone's cards below 1000px; the rest wait for 768px. */
@media (max-width: 1000px) {
  .oc-sail-wrap.oc-wide { border: 0; background: none; }
  .oc-wide .oc-rate-table, .oc-wide .oc-rate-table tbody { display: block; }
  .oc-wide .oc-rate-table thead { display: none; }
  .oc-wide .oc-rate-table tr { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: .3rem .9rem; border: 1px solid rgba(26, 26, 26, .12); background: rgba(255, 255, 255, .4); padding: 1rem 1.1rem 1.1rem; margin-bottom: .7rem; }
  .oc-wide .oc-rate-table td { display: block; padding: 0; border: 0; }
  .oc-wide .oc-rate-table .oc-when { grid-column: 1 / -1; white-space: normal; font-size: 1.15rem; margin-bottom: .45rem; }
  .oc-wide .oc-rate-table td.oc-price { text-align: left; font-size: 1.08rem; line-height: 1.25; white-space: normal; }
  .oc-wide .oc-rate-table td.oc-price::before { content: attr(data-label); display: block; font-family: 'Source Sans 3', sans-serif; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark); margin-bottom: .2rem; }
}
@media (max-width: 768px) {
  #ship, #activities, #cuisine, #sailings { padding: 3.5rem 0; }
  .oc-cabins, .oc-decks { margin-top: 3rem; }
  .oc-sail-wrap { border: 0; background: none; }
  .oc-rate-table, .oc-rate-table tbody { display: block; }
  .oc-rate-table thead { display: none; }
  .oc-rate-table tr { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: .3rem .9rem; border: 1px solid rgba(26, 26, 26, .12); background: rgba(255, 255, 255, .4); padding: 1rem 1.1rem 1.1rem; margin-bottom: .7rem; }
  .oc-rate-table td { display: block; padding: 0; border: 0; }
  .oc-rate-table .oc-when { grid-column: 1 / -1; white-space: normal; font-size: 1.15rem; margin-bottom: .45rem; }
  .oc-rate-table td.oc-price { text-align: left; font-size: 1.08rem; line-height: 1.25; white-space: normal; }
  .oc-rate-table td.oc-price::before { content: attr(data-label); display: block; font-family: 'Source Sans 3', sans-serif; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark); margin-bottom: .2rem; }
}
@media (max-width: 700px) {
  .oc-deck-panel { grid-template-columns: 1fr; gap: 1rem; }
  .oc-decks-head { display: block; }
  .oc-decks-intro { margin-top: .4rem; }
}
@media (max-width: 600px) {
  .oc-cabin-grid { grid-template-columns: 1fr; }
  .oc-deck-tabs button { flex: 1 1 auto; padding: .55rem .5rem; }
}
@media (max-width: 560px) {
  .oc-act-grid { grid-template-columns: 1fr; }
  .oc-act-card img { aspect-ratio: 3 / 2; }
  .oc-ship-photos img, .oc-dishes img { height: 170px; }
  .oc-stats div { padding: 1.2rem .4rem; }
  .oc-rate-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-rate-table[style*="--cols:1"] tr { grid-template-columns: 1fr; }
}