/* ==========================================================================
   PHOTO HEADERS (round 122p). The header on nine pages was a dark navy-to-
   violet gradient. It is now a PHOTOGRAPH -- one of the founder's own, from
   frontend/static/images/hero-photos-web/, the same folder the landing hero
   already draws from. Nothing new is downloaded, nothing new is licensed,
   and every picture is a real place in India, which is the only kind of
   place Seenary plans.

   Founder direction: a beach on Profile, mountains on the Budget estimator,
   and a fitting picture for the toolkit, Settings, About and Talk to us.

   The text over these stays WHITE, as it has always been, and the scrim
   below is what makes that safe -- .marketing-hero::after was a violet glow
   for the old gradient and is a legibility scrim here. It is darkest at the
   top (under the transparent nav) and at the bottom (where a card or the
   page's first line meets it), and lightest across the middle, so the
   photograph is still a photograph.

   A page opts in with `hero-photo hero-photo-<page>` on its own hero.
   ========================================================================== */

.marketing-hero.hero-photo {
  /* The ink shows while the photograph loads, so the white headline is
     never white-on-white for a frame. */
  background-color: var(--ink);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 55%;
}

.marketing-hero.hero-photo::after {
  background: linear-gradient(
    180deg,
    rgba(11, 15, 34, 0.66) 0%,
    rgba(11, 15, 34, 0.42) 38%,
    rgba(11, 15, 34, 0.46) 62%,
    rgba(11, 15, 34, 0.72) 100%
  );
}

/* A compact header is ~210px tall, so the scrim has far less room to fade
   in and out; a flatter one keeps the single line of text legible without
   turning the photograph into a dark bar. */
.marketing-hero.hero-photo.marketing-hero--compact::after {
  background: linear-gradient(
    180deg,
    rgba(11, 15, 34, 0.62) 0%,
    rgba(11, 15, 34, 0.50) 50%,
    rgba(11, 15, 34, 0.66) 100%
  );
}

/* --- One photograph per page ---------------------------------------------
   Each is named for what it IS, not for the page, so a swap is a one-line
   edit and the next reader can see what they are choosing between. */

/* Palms over a beach at sunset. */
.hero-photo-beach {
  background-image: url("/static/images/hero-photos-web/PXL_20240124_124853044.jpg");
}
/* The Kanchenjunga range above the cloud line. */
.hero-photo-mountains {
  background-image: url("/static/images/hero-photos-web/PXL_20231127_101127163.jpg");
}
/* A valley at dusk from a fort wall -- a long way from a signal, which is
   the whole subject of the Offline toolkit. */
.hero-photo-remote {
  background-image: url("/static/images/hero-photos-web/PXL_20250501_132544388.RAW-01.COVER.jpg");
}
/* Hampi's colonnade: stone, order, everything in its place. */
.hero-photo-colonnade {
  background-image: url("/static/images/hero-photos-web/PXL_20260517_070519807.jpg");
}
/* A lake and the hills behind it at first light. */
.hero-photo-lake {
  background-image: url("/static/images/hero-photos-web/PXL_20250118_023644366-2.jpg");
}
/* People on a beach at sunset -- the page where travellers write to us. */
.hero-photo-people {
  background-image: url("/static/images/hero-photos-web/PXL_20240123_132351548.jpg");
}

/* --- Text over a photograph ----------------------------------------------
   A gradient is flat, so --on-ink-muted at 0.68 was always legible on it. A
   photograph is not: it has a sun glare, a pale sky, a lit wall. Measured on
   these six, the sub-line and About's intro were the two that fell down.
   So on a photo header the secondary text is brighter, and everything picks
   up a soft shadow -- which does nothing on a dark patch and is what keeps
   the line readable where the picture goes bright. */

.hero-photo .marketing-hero-headline {
  text-shadow: 0 1px 14px rgba(11, 15, 34, 0.55);
}

/* --accent-bright is a violet picked for the old flat navy; against a dusk
   photograph it is the one line that goes muddy. Lifted towards white and
   given the same shadow as everything else here. */
.hero-photo .marketing-eyebrow {
  color: #D9CCFF;
  text-shadow: 0 1px 12px rgba(11, 15, 34, 0.65);
}

.hero-photo .marketing-hero-sub,
.hero-photo .marketing-hero-intro p,
.hero-photo .toolkit-trip-picker label {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(11, 15, 34, 0.6);
}

/* The toolkit's live network badge: --success is a dark green chosen for a
   white card, and it disappeared against the valley. */
.hero-photo .toolkit-net-badge {
  color: #8FE9B4;
  text-shadow: 0 1px 10px rgba(11, 15, 34, 0.7);
}
.hero-photo .toolkit-net-badge.offline {
  color: #FBBF24;
}

/* --- Focal points --------------------------------------------------------
   `background-position` is set here at the same weight as the base rule
   above (`.marketing-hero.hero-photo`, two classes) -- written with one
   class it silently loses to it, and every photograph sits at the default
   55% no matter what this says. Each number was chosen against the REAL
   crop the page makes, not against the whole frame: a header is a 4:1 slot
   and a 4:3 photograph loses two thirds of its height to it. */

.marketing-hero.hero-photo-beach      { background-position: center 34%; }  /* palms and sky, not the sun's glare */
.marketing-hero.hero-photo-mountains  { background-position: center 30%; }  /* the snow line, above the haze */
.marketing-hero.hero-photo-remote     { background-position: center 46%; }  /* the far ridge and the valley floor */
.marketing-hero.hero-photo-colonnade  { background-position: center 62%; }  /* the colonnade, not the sky above it */
/* The lake photograph is 16:9 and so is About's tall header, so `cover`
   fits it EXACTLY -- there is no overflow for a focal point to move, and
   the dark eave along its top edge cannot be cropped by position alone.
   Oversizing on the HEIGHT (142%) creates that overflow -- sizing on the
   width does not, because the image then ends up shorter than the header --
   and anchoring to the bottom drops the eave off the top. */
.marketing-hero.hero-photo-lake {
  background-size: auto 142%;
  background-position: 46% 100%;
}
.marketing-hero.hero-photo-people     { background-position: center 62%; }  /* the figures on the sand */

/* Measured, not assumed: with the text hidden and the rectangles it
   occupies sampled, every line on these six clears 4.5:1 against white
   EXCEPT the Budget eyebrow, which sits on Kanchenjunga's snow at 3.73.
   The headline there is large text and passes at 4.11; the eyebrow is
   12.5px, so it needs the full bar. A little more scrim on this one
   photograph, rather than a darker scrim on all six. */
/* Three classes, to tie with the compact-hero scrim above and win on
   source order -- two classes silently lose to it, which is how this rule
   changed nothing the first time it was written. */
.marketing-hero.hero-photo.hero-photo-mountains::after {
  background: linear-gradient(
    180deg,
    rgba(11, 15, 34, 0.70) 0%,
    rgba(11, 15, 34, 0.60) 50%,
    rgba(11, 15, 34, 0.74) 100%
  );
}