/* Intare — inner page (single post / page) design. Loaded after style.css.
 *
 * Everything here is an override of the first-pass inner-page CSS in style.css.
 * Three problems drive it:
 *
 *   1. The hero buried its photograph under a flat 78% scrim on a green plate,
 *      so all 31 articles opened on the same dark rectangle. The photograph now
 *      runs at full strength with a bottom-weighted scrim that is only dark
 *      where the heading sits — measured at 8.8:1 against a pure-white pixel,
 *      well past the 4.5:1 floor, and clear at the top where nothing overlaps.
 *
 *   2. Every imported content block was the same white rounded card with a 1px
 *      border and a soft shadow, distinguished only by a 3px top rule. Six
 *      blocks, one shape. They are now six different shapes: a numbered index,
 *      a divided comparison panel, a timetable, a run-in checklist, a rule-and-
 *      quotemark pull quote and a hanging-icon note. None of them is a card.
 *
 *   3. The prose column ran at 820px with nothing ever using the space beside
 *      it. Photographs now break out of it — symmetrically, on the column's own
 *      centre line — while every text block stays on the measure. Section 4
 *      takes that further: a pair of frames running the full width of the
 *      viewport, placed at a section break in the middle of the article.
 *
 * Nothing here depends on JavaScript and nothing starts at opacity:0.
 */

/* =====================================================================
   1. HERO
   The scrim is two gradients: a heavy foot under the type, and a light
   head so the fixed nav keeps something to sit on. The middle of the
   frame is left alone — that is the whole point.
   ===================================================================== */
.page-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 68vh, 620px);
  padding: 190px 0 62px;
  background: #0D1711;
}

.page-hero:before { opacity: 1; }

.page-hero:after {
  background:
    linear-gradient(to top,
      rgba(9, 17, 13, .94) 0%,
      rgba(9, 17, 13, .90) 28%,
      rgba(9, 17, 13, .78) 44%,
      rgba(9, 17, 13, .42) 62%,
      rgba(9, 17, 13, .14) 80%,
      rgba(9, 17, 13, 0) 100%),
    linear-gradient(to bottom,
      rgba(9, 17, 13, .48) 0%,
      rgba(9, 17, 13, 0) 28%);
}

.page-hero .section-label {
  background: rgba(9, 17, 13, .45);
  border: 1px solid rgba(189, 149, 92, .55);
  color: var(--gold-lt);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.page-hero h1 {
  max-width: 940px;
  text-shadow: 0 1px 34px rgba(9, 17, 13, .55);
}

.page-hero .page-hero-meta {
  color: rgba(255, 255, 240, .82);
  text-shadow: 0 1px 20px rgba(9, 17, 13, .6);
}

@media (max-width: 991px) {
  .page-hero { min-height: clamp(380px, 60vh, 520px); padding: 150px 0 48px; }
}

@media (max-width: 767px) {
  .page-hero { min-height: 340px; padding: 130px 0 40px; }
}

/* =====================================================================
   2. PROSE RHYTHM
   The old 70px gap between hero and first line read as a mistake because
   nothing marked the opening. The lede does that job, so the space now
   has something to be space around.
   ===================================================================== */
.page-hero + .page-shell { padding-top: 78px; }

.page-content > p:first-of-type {
  font-size: 20px;
  line-height: 1.78;
  color: #3E4A43;
  margin-bottom: 34px;
}

@media (min-width: 768px) {
  .page-content > p:first-of-type:first-letter {
    float: left;
    margin: 4px 14px 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 68px;
    line-height: .82;
    color: var(--green);
  }
}

.page-content h2 { letter-spacing: -.01em; }

/* Photographs, and only photographs, run wider than the measure.
 *
 * An earlier pass widened the text blocks too. A block of prose that starts
 * left of the paragraph above it does not read as a designed break-out, it
 * reads as a bug — which is exactly how it was reported. Every text block now
 * shares one left edge with the prose; a picture wider than its column is a
 * convention nobody misreads.
 *
 * The bleed is a symmetric pair of negative margins rather than a width plus a
 * transform: equal margins on both sides keep the figure on the same centre
 * line as the column by construction, at every viewport, with no arithmetic to
 * get wrong. Capped at 120px and against the viewport so it can never reach
 * the edge or start a horizontal scroll. */
@media (min-width: 1024px) {
  .page-content > .article-figure {
    --intare-bleed: min(120px, calc((100vw - 120px - 820px) / 2));
    margin-left: calc(var(--intare-bleed) * -1);
    margin-right: calc(var(--intare-bleed) * -1);
  }
}

/* ---------- Figures ---------- */
.page-content .article-figure img { border-radius: 0; }

.page-content .article-figure figcaption {
  display: block;
  max-width: 620px;
  margin: 14px auto 0;
  padding-top: 12px;
  border-top: 1px solid rgba(189, 149, 92, .4);
  font-size: 13px;
  letter-spacing: .4px;
  color: #7f7f76;
}

/* =====================================================================
   3. CONTENT BLOCKS
   ===================================================================== */

/* ---------- Note: hanging icon, warm ground, hairline rules ---------- */
.page-content .tip-box {
  position: relative;
  margin: 44px 0;
  padding: 30px 34px 30px 76px;
  background: #F5EFE4;
  border: 0;
  border-top: 1px solid rgba(189, 149, 92, .45);
  border-bottom: 1px solid rgba(189, 149, 92, .45);
  border-radius: 0;
}

.page-content .tip-box:before {
  content: "\f0eb";
  position: absolute;
  left: 32px;
  top: 32px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 21px;
  color: var(--gold-dk);
}

.page-content .tip-box p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.72;
  color: var(--green);
}

/* ---------- Pull quote: one rule, one hanging mark, left aligned ---------- */
.page-content .pull-quote {
  margin: 58px 0 50px;
  padding: 34px 0 0;
  border: 0;
  border-top: 2px solid var(--gold);
  text-align: left;
}

.page-content .pull-quote p {
  position: relative;
  padding-left: 66px;
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.42;
  letter-spacing: -.01em;
}

.page-content .pull-quote p:before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -.26em;
  font-family: var(--serif);
  font-size: 78px;
  line-height: 1;
  color: var(--gold);
  opacity: .6;
}

/* ---------- Species / subject list: a numbered index, not cards ---------- */
.page-content .activity-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 40px 0 42px;
  border-top: 1px solid rgba(33, 54, 44, .16);
  counter-reset: intare-idx;
}

.page-content .activity-card {
  position: relative;
  counter-increment: intare-idx;
  padding: 24px 0 26px 52px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(33, 54, 44, .16);
  border-radius: 0;
  box-shadow: none;
}

.page-content .activity-card:before {
  content: counter(intare-idx, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 25px;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .5px;
  color: var(--gold);
}

.page-content .activity-card p > strong:first-child {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 9px;
}

/* ---------- Comparison: facing panels sharing a hairline ---------- */
.page-content .comparison-grid {
  gap: 1px;
  margin: 42px 0;
  background: rgba(33, 54, 44, .14);
  border-top: 2px solid var(--green-2);
}

.page-content .comparison-card {
  padding: 30px 32px 32px;
  background: var(--stone);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-content .comparison-card p > strong:first-child {
  font-size: 19px;
  margin-bottom: 11px;
}

/* ---------- Seasons: a timetable, term in the margin ---------- */
.page-content .season-cards {
  display: block;
  margin: 42px 0;
  border-top: 1px solid rgba(189, 149, 92, .55);
}

.page-content .season-card {
  position: relative;
  padding: 26px 26px 28px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(33, 54, 44, .14);
  border-radius: 0;
  box-shadow: none;
}

.page-content .season-card:nth-child(even) { background: rgba(248, 246, 243, .8); }

@media (min-width: 768px) {
  .page-content .season-card { padding-left: 264px; }

  .page-content .season-card p > strong:first-child {
    position: absolute;
    left: 26px;
    top: 26px;
    width: 212px;
    margin: 0;
    font-size: 17.5px;
    line-height: 1.34;
  }
}

/* ---------- Packing list: run-in headings, ticked ---------- */
.page-content .pack-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 48px;
  margin: 38px 0 42px;
}

.page-content .pack-category {
  position: relative;
  padding: 15px 0 15px 34px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-content .pack-category:before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 21px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--gold-dk);
}

.page-content .pack-category p > strong:first-child {
  display: inline;
  margin: 0 5px 0 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--green);
}

@media (max-width: 767px) {
  .page-content .activity-cards,
  .page-content .pack-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page-content .tip-box { padding: 26px 24px 26px 62px; }
  .page-content .tip-box:before { left: 22px; top: 28px; font-size: 18px; }
  .page-content .pull-quote p { padding-left: 46px; }
  .page-content .pull-quote p:before { font-size: 58px; }
  .page-content .comparison-card { padding: 24px 24px 26px; }
  .page-content .season-card { padding: 22px 20px 24px; }
}

/* =====================================================================
   4. FULL-BLEED PAIRED PHOTOGRAPH
   Two frames side by side, edge to edge of the viewport, dropped into the
   article at a section break.

   The full-bleed technique, and why it is not the usual one: the obvious
   `width:100vw; margin-left:calc(50% - 50vw)` is wrong on Windows, because
   100vw counts the scrollbar. That overflows by the scrollbar's width and
   brings back the horizontal scroll this build has spent its whole life
   removing — and html{overflow-x:clip} would hide it while leaving the
   layout wrong.

   Instead the rail is absolutely positioned against .page-shell, which is a
   plain block in normal flow and therefore already exactly the width of the
   viewport minus the scrollbar. `left:0;right:0` resolves against that
   padding box, so the rail is full-bleed by measurement rather than by
   arithmetic, and no vw appears anywhere in its width. `top` is left at auto,
   which for an absolutely positioned box means its static position — so it
   still sits exactly where it fell in the copy. Horizontal extent from the
   ancestor, vertical position from the flow.

   The in-flow wrapper reserves the height, and the rail is given the same
   height, so nothing overlaps and nothing shifts as the images load. vw is
   used for that height, where over-counting the scrollbar changes a height
   by a few pixels and can cause no overflow at all.
   ===================================================================== */
.page-shell { position: relative; }

.page-content > .inner-pair {
  --pair-h: clamp(260px, 37.5vw, 560px);
  position: static;
  height: var(--pair-h);
  margin: 78px 0 82px;
  padding: 0;
}

.page-content > .inner-pair.has-text { --pair-h: calc(clamp(260px, 37.5vw, 560px) + 46px); }

.inner-pair-rail {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--pair-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 2px;
  background: var(--green);
}

.inner-pair-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--green);
}

.page-content .inner-pair-item img {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}

.page-content .inner-pair-item figcaption {
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 20px 0;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .2px;
  text-align: left;
  color: #85857c;
  background: var(--cream);
}

/* Printed only where the photographs are not of the place the page is about,
   so the substitution is stated rather than implied. */
.page-content .inner-pair-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 11px 20px 0;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: .2px;
  color: #85857c;
  background: var(--cream);
}

/* Stacked below the tablet breakpoint. Side by side at 375px each frame is
   about 186px wide — smaller than the in-column figures above it, which
   would put the page's most prominent photography at its least prominent
   size. */
@media (max-width: 767px) {
  .page-content > .inner-pair { --pair-h: clamp(420px, 148vw, 640px); margin: 52px 0 56px; }
  .page-content > .inner-pair.has-text { --pair-h: calc(clamp(420px, 148vw, 640px) + 44px); }
  .inner-pair-rail { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; }
}

/* =====================================================================
   5. MATCHED ITINERARIES
   Same cards as [intare_packages]; only the band around them is new.
   ===================================================================== */
.inner-related {
  padding: 80px 0 88px;
  background: var(--stone);
  border-top: 1px solid rgba(189, 149, 92, .3);
}

.inner-related-head { max-width: 760px; margin: 0 0 42px; }

.inner-related-title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--green);
}

.inner-related-intro {
  max-width: 620px;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--body);
}

.inner-related .pkg-inline {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

/* Few matches should sit at card width, not stretch across the band. */
.inner-related .pkg-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 380px)); }

@media (max-width: 767px) {
  .inner-related { padding: 56px 0 62px; }
  .inner-related .pkg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- In-article form ----------
   Two paragraphs into an activity piece, the same block has a different job:
   it interrupts rather than concludes. So it stays on the prose measure
   instead of running full width — a band this high would read as the end of
   the page — loses its ground and its standfirst for a pair of gold rules,
   and its heading drops to roughly two thirds of an article heading so it
   sits under the copy around it rather than competing with it. */
.page-content > .inner-related--inline {
  margin: 44px 0 48px;
  padding: 30px 0 32px;
  background: none;
  border-top: 1px solid rgba(189, 149, 92, .5);
  border-bottom: 1px solid rgba(189, 149, 92, .5);
}

.page-content > .inner-related--inline .inner-related-title {
  margin: 0 0 24px;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.3;
}

.inner-related--inline .pkg-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.inner-related--inline .pkg-card { border-radius: 0; }
.inner-related--inline .pkg-card-media img { aspect-ratio: 16 / 10; }
.inner-related--inline .pkg-card-body { padding: 15px 17px 17px; }

.page-content .inner-related--inline .pkg-card-title {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.3;
}

.inner-related--inline .pkg-card-link { font-size: 11px; letter-spacing: 1.3px; }
.inner-related--inline .pkg-inline-more { margin: 22px 0 0; }
.inner-related--inline .pkg-inline-link { font-size: 11.5px; }

/* Three stacked cards is a long wall to put in front of someone who has read
   two paragraphs, so on a phone each card lies down instead: thumbnail left,
   title right, about a third of the height. */
@media (max-width: 767px) {
  .page-content > .inner-related--inline { margin: 34px 0 38px; padding: 26px 0 28px; }
  .inner-related--inline .pkg-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .inner-related--inline .pkg-card { flex-direction: row; align-items: stretch; }
  .inner-related--inline .pkg-card-media { flex: 0 0 104px; }
  .inner-related--inline .pkg-card-media img { aspect-ratio: auto; height: 100%; }
  .inner-related--inline .pkg-card-dest,
  .inner-related--inline .pkg-card-days { display: none; }
  .inner-related--inline .pkg-card-body { padding: 12px 14px 13px; }
  .page-content .inner-related--inline .pkg-card-title { margin: 0 0 9px; font-size: 15.5px; }

  /* Rows are left to size themselves. Evening them with grid-auto-rows:1fr
     grows every card to match the longest title and adds ~120px to a block
     that is meant to be an aside; -webkit-line-clamp is blockified in current
     Chrome and does nothing. An uneven list is what a list looks like. */
}

/* =====================================================================
   6. CLOSING INVITATION
   ===================================================================== */
.inner-cta {
  padding: 86px 0 90px;
  background: var(--green);
  color: #F7F3E7;
}

.inner-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.inner-cta-media {
  position: relative;
  margin: 0;
  min-width: 0;
}

.inner-cta-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.inner-cta-media:after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(189, 149, 92, .6);
  pointer-events: none;
}

.inner-cta-body { min-width: 0; }

.inner-cta .section-label {
  background: rgba(189, 149, 92, .2);
  color: var(--gold-lt);
}

.inner-cta-title {
  margin: 0 0 18px;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(44px, 5.4vw, 70px);
  line-height: 1.08;
  color: #F2E3C4;
}

.inner-cta-text {
  max-width: 560px;
  margin: 0 0 30px;
  font-size: 17px;
  line-height: 1.85;
  font-weight: 300;
  color: rgba(255, 255, 240, .78);
}

.inner-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
  margin-bottom: 24px;
}

.inner-cta-btn.hero-cta-btn {
  padding: 16px 34px;
  background: var(--gold-lt);
  border-color: var(--gold-lt);
  color: var(--green) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
}

.inner-cta-btn.hero-cta-btn:hover {
  background: #E3BC85;
  border-color: #E3BC85;
}

.inner-cta-alt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 240, .88);
  transition: color .3s;
}

.inner-cta-alt i { font-size: 14px; color: var(--gold-lt); }
.inner-cta-alt span { border-bottom: 1px solid rgba(255, 255, 240, .28); padding-bottom: 2px; }
.inner-cta-alt:hover { color: #fff; }
.inner-cta-alt:hover span { border-color: rgba(255, 255, 240, .7); }

.inner-cta-note {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 240, .62);
}

.inner-cta-sign {
  margin: 0;
  font-family: var(--script);
  font-size: 34px;
  line-height: 1.1;
  color: var(--gold-lt);
}

@media (min-width: 992px) {
  .inner-cta-inner { grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); gap: 64px; }
}

@media (max-width: 767px) {
  .inner-cta { padding: 58px 0 64px; }
  .inner-cta-inner { gap: 32px; }
  .inner-cta-media:after { inset: 10px; }
}

/* The article closes into the stone band, so the shell stops short. */
.inner-editorial .page-shell { padding-bottom: 72px; }

@media (max-width: 767px) {
  .inner-editorial .page-shell { padding-bottom: 46px; }
}