/* ===========================================================================
   discover.css — the two discovery pages: a destination's famous places, and
   one of them in full.
   ===========================================================================
   WHY THESE TWO ARE THEIR OWN STYLESHEET. They were `.dl-*` and `.lp-*` blocks
   inside hotel.css, which is the RESULTS furniture — filter rails, sort bars,
   hotel rows, pagination. These pages sell a place before anyone is choosing
   between rooms, and the two jobs pull in opposite directions: a results page
   should be quiet and dense, a discovery page should be photographic and
   spacious. Kept in one file they were one file's worth of compromise.

   THE PALETTE IS SOFT BLUE-GREY, WHITE AND ONE MUTED TEAL. No gold and no
   black: the photographs are the colour on these pages, and a saturated theme
   competes with them. The teal appears only where something is interactive or
   active — a button, the ring on the card under the pointer, a price — and the
   backgrounds stay within four points of each other so nothing reads as a
   block of colour.

   THE ONE DARK SURFACE IS A SCRIM OVER A PHOTOGRAPH, and it is a legibility
   device rather than a theme: white type on an unknown photograph needs a
   guaranteed floor of contrast. It is tinted towards the ink (#263746) rather
   than pure black, and it is the only place anything approaching dark appears.

   NOTHING HERE IS PAGE-SPECIFIC FURNITURE. The header, the footer, the
   booking card and the results pages are untouched; these rules only apply
   under `.disc`, which only these two pages set.
   =========================================================================== */
.disc {
  --disc-bg: #F3F7FA;
  --disc-bg-2: #EAF1F5;
  --disc-card: #FFFFFF;
  --disc-ink: #263746;
  --disc-mute: #6B7C89;
  --disc-accent: #4F8FA8;
  --disc-accent-deep: #3E7A92;
  --disc-accent-soft: rgba(79, 143, 168, .08);
  --disc-accent-line: rgba(79, 143, 168, .35);
  --disc-line: rgba(38, 55, 70, .10);
  /* The sky. Three stops of very light blue, no saturation above 12% - a
     travel page opens onto daylight, not onto a brand colour. */
  --disc-sky-1: #F5FAFD;
  --disc-sky-2: #E8F2F9;
  --disc-sky-3: #DCEAF4;
  /* Glass, for panels that sit on a photograph. */
  --disc-glass: rgba(255, 255, 255, .16);
  --disc-glass-line: rgba(255, 255, 255, .30);
  --disc-shadow: 0 8px 24px -14px rgba(38, 55, 70, .28);
  --disc-shadow-lift: 0 12px 30px rgba(38, 55, 70, .12);
  /* Playfair for headings, the UI font for everything else. The pair is the
     whole typographic idea: a serif says "place", a grotesque says "book". */
  --disc-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* THE PAGE IS A SKY, not a sheet of paper with a tint. Four layers: two soft
   white clouds high on the page, a wider blue wash below them, and a vertical
   gradient that starts pale at the top and deepens slightly towards the
   bottom - the way light actually falls in a photograph of one. Every layer
   is under a fifth of an opacity, so it still reads as background behind the
   photographs rather than as a coloured page competing with them.

   `fixed` attachment is what makes it a sky rather than a texture: the
   content scrolls over it instead of carrying it along. */
body.disc { background: var(--disc-sky-1); }
.disc .disc-main {
  background:
    radial-gradient(60% 34% at 16% 6%, rgba(255,255,255,.92), transparent 70%),
    radial-gradient(48% 26% at 82% 14%, rgba(255,255,255,.72), transparent 72%),
    radial-gradient(70% 50% at 50% 106%, rgba(79,143,168,.14), transparent 70%),
    linear-gradient(180deg, var(--disc-sky-1) 0%, var(--disc-sky-2) 42%, var(--disc-sky-3) 100%);
  background-attachment: fixed;
  padding-bottom: 72px;
}

/* Content column. `wrap` is the site's, so these pages line up with every
   other one; this only caps it where a 1920 screen would otherwise stretch a
   four-card row into five thin ones. */
.disc .wrap { max-width: 1320px; }

.disc h1, .disc h2, .disc h3 { font-family: var(--disc-serif); color: var(--disc-ink); letter-spacing: -.01em; }

/* A hairline of teal under a section heading — the only structural accent on
   the page, and it is 44px of it. */
.disc-h2 { margin: 0 0 4px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; }
.disc-h2::after {
  content: ''; display: block; width: 44px; height: 3px; margin-top: 10px;
  border-radius: 3px; background: var(--disc-accent);
}
.disc-sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--disc-mute); }

.disc .dh-back {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 22px 0 18px; font-size: 14px; font-weight: 600; color: var(--disc-mute);
  transition: color .2s ease;
}
.disc .dh-back:hover { color: var(--disc-accent); }
.disc .dh-back:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 4px; border-radius: 6px; }

/* ==========================================================================
   THE DESTINATION HEADER — the city's own photograph, used quietly
   ========================================================================== */
.dl-hero {
  position: relative; overflow: hidden;
  border-radius: 22px; margin-bottom: 30px;
  min-height: 210px; display: flex; align-items: flex-end;
  padding: clamp(22px, 3vw, 40px);
  background: linear-gradient(120deg, #2E4657 0%, #3A5568 60%, #46657A 100%);
  color: #fff;
}
.dl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
/* Tinted towards the ink rather than to black, and lighter at the top so the
   photograph still reads as a photograph. */
.dl-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,55,70,.20) 0%, rgba(38,55,70,.46) 55%, rgba(38,55,70,.68) 100%);
}
.dl-hero-body { position: relative; z-index: 1; max-width: 680px; }
.dl-hero-eyebrow {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #BFE0EC;
}
.dl-hero h1 { margin: 0; color: #fff; font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; line-height: 1.06; }
.dl-hero-lead {
  margin: 12px 0 0; max-width: 54ch; font-size: clamp(14.5px, 1.3vw, 16.5px);
  line-height: 1.6; color: rgba(255,255,255,.88);
}
.dl-count { margin: 0 0 16px; font-size: 13.5px; font-weight: 600; color: var(--disc-mute); }

/* ==========================================================================
   THE CARDS
   ==========================================================================
   `auto-fill` with a 260px floor is what makes the column count a consequence
   of the width rather than a list of breakpoints: four or five up at 1920,
   four at 1440, three at 1024, two at 768, one on a phone, and every width
   between them handled without another media query.
   ========================================================================== */
.dl-grid {
  display: grid; gap: clamp(16px, 1.8vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.dl-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--disc-card); border-radius: 20px;
  border: 1px solid transparent;
  box-shadow: var(--disc-shadow);
  transition: transform 250ms ease, filter 250ms ease, opacity 250ms ease,
              box-shadow 250ms ease, border-color 250ms ease;
}

/* --- THE SPOTLIGHT ---------------------------------------------------------
   One card is picked out and the rest step back. The grid carries
   `is-engaged` while something is hovered, focused or active, and only then
   does anything dim — no card is dimmed at rest, which is what keeps the
   default state honest.

   THE DIM IS BRIGHTNESS AND A LITTLE OPACITY, NOT A COLOUR. Painting the
   others grey would change what they are; taking 28% of their light leaves
   every one readable — name, description, count and button all still legible —
   while the chosen one is plainly the brighter thing on the page.

   `is-active` IS SET BY SCRIPT, not by :hover, because a phone has no hover
   and a keyboard has no pointer. destination.js sets it on pointerenter, on
   focus and on tap; the CSS only describes the two states. */
.dl-grid.is-engaged .dl-card { filter: brightness(.72); opacity: .92; }
.dl-grid.is-engaged .dl-card.is-active {
  filter: none; opacity: 1;
  transform: translateY(-4px) scale(1.015);
  border-color: var(--disc-accent-line);
  box-shadow: 0 12px 30px rgba(38, 55, 70, .12);
}
/* The keyboard gets the same treatment plus a ring it can see on any
   background — never colour alone. */
.dl-card:focus-within { border-color: var(--disc-accent-line); }
.dl-card a:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 3px; border-radius: 999px; }

.dl-art {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(135deg, #E3EDF3, #F1F6F9);
}
.dl-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 350ms ease;
}
.dl-grid.is-engaged .dl-card.is-active .dl-img { transform: scale(1.04); }
/* A hint of the accent across the chosen card's photograph, so the highlight
   is not only a brightness difference. */
.dl-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(79,143,168,0) 55%, rgba(79,143,168,.22));
  opacity: 0; transition: opacity 250ms ease;
}
.dl-grid.is-engaged .dl-card.is-active .dl-art::after { opacity: 1; }
.dl-pin {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(38,55,70,.42); backdrop-filter: blur(4px);
}
.dl-art:not(:has(.dl-img)) .dl-pin {
  inset: 0; margin: auto; width: 46px; height: 46px;
  background: var(--disc-accent-soft); color: var(--disc-accent);
}

.dl-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.dl-name { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.dl-desc {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--disc-mute);
  /* Two lines, so a long description cannot make one card taller than its
     neighbours and leave a hole in the row. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dl-count-line {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--disc-mute);
}
.dl-count-line svg, .dl-count-line .jpi { width: 15px; height: 15px; }

.dl-actions { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.disc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  font-family: var(--ff-body, inherit); font-size: 14px; font-weight: 700;
  background: var(--disc-accent); color: #fff;
  transition: background 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
.disc-btn:hover { background: var(--disc-accent-deep); transform: translateY(-1px); }
.disc-btn:focus-visible { outline: 2px solid var(--disc-ink); outline-offset: 3px; }
.disc-btn svg, .disc-btn .jpi { width: 16px; height: 16px; }
/* The chosen card's call to action is the clearest thing on it. */
.dl-grid.is-engaged .dl-card.is-active .disc-btn {
  background: var(--disc-accent-deep);
  box-shadow: 0 8px 18px -10px rgba(79, 143, 168, .9);
}
/* A quieter second action — outline, not a second solid button. */
.disc-btn-ghost {
  background: transparent; color: var(--disc-accent);
  border: 1px solid var(--disc-accent-line); padding: 10px 17px;
}
.disc-btn-ghost:hover { background: var(--disc-accent-soft); color: var(--disc-accent-deep); }
.disc-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--disc-mute);
  transition: color 250ms ease;
}
.disc-link:hover { color: var(--disc-accent); }
.disc-link:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 3px; border-radius: 6px; }

/* ==========================================================================
   ONE PLACE — the detail page
   ==========================================================================
   THE ORDER IS THE ARGUMENT: the photograph, what it costs, what to know
   before going, what the place is, where to sleep, what else is near, how to
   plan it, and then every photograph of it. A traveller who stops reading
   after the second screen has still seen the two things they came for.

   EVERY SECTION IS OPTIONAL. Most of what is below draws editorial columns
   that ship empty (migration 0080), and an empty column means the section is
   not in the document at all. So these rules are written for a page that has
   three sections and for a page that has eight, and neither leaves a gap: the
   article is a flex column with one gap, not a stack of fixed heights.
   ========================================================================== */
/* FULL-BLEED, from inside a centred column: the hero is the photograph, and a
   photograph with a 32px gutter either side is a thumbnail. */
.lp-hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 38px;
  /* FULL HEIGHT, WITH A CEILING. `min(86vh, 760px)` fills a laptop screen and
     stops a 27-inch monitor turning the photograph into a poster nobody can
     see past; `dvh` keeps a phone's collapsing address bar from resizing the
     hero mid-scroll. The 380px floor is for a landscape phone, where 86vh is
     three hundred pixels of nothing. */
  min-height: max(380px, min(86vh, 760px));
  min-height: max(380px, min(86dvh, 760px));
  padding: clamp(26px, 4vw, 60px) clamp(18px, 6vw, 80px) clamp(34px, 5vw, 72px);
  background: linear-gradient(120deg, #2E4657, #46657A);
  color: #fff;
}
/* A slow drift on the photograph, so the first screen is not a still. 24
   seconds and 4% - at that speed it reads as depth rather than as motion,
   and prefers-reduced-motion switches it off entirely. */
@keyframes lpHeroDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
.lp-hero-img { animation: lpHeroDrift 24s ease-out both; }
.lp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The one dark surface on these pages, and it is a legibility device rather
   than a theme: white type over an unknown photograph needs a guaranteed
   floor of contrast. Tinted towards the ink, heaviest at the bottom where the
   type is, so the top two thirds still read as a photograph. The second layer
   leans the shadow into the left corner the text starts from. */
.lp-hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(38,55,70,.52) 0%, rgba(38,55,70,.12) 46%, transparent 70%),
    linear-gradient(180deg, rgba(38,55,70,.08) 0%, rgba(38,55,70,.34) 46%, rgba(38,55,70,.80) 100%);
}
.lp-hero-body { position: relative; z-index: 1; width: min(1320px, 100%); margin-inline: auto; }
.lp-hero h1 {
  margin: 0; color: #fff; line-height: 1.02;
  font-size: clamp(34px, 6vw, 68px); font-weight: 700; letter-spacing: -.015em;
}
.lp-hero-pin { position: relative; z-index: 1; color: rgba(255,255,255,.55); }

/* --- the trail ----------------------------------------------------------- */
.lp-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72);
  /* The scrim is deliberately lightest at the top so the photograph still
     reads as one, which leaves the trail sitting on whatever is up there -
     often bright sky. A shadow under the letters fixes that for 13px type
     without darkening the picture the way a heavier scrim would. */
  /* Two layers: a tight one for the letterforms and a wide soft one that
     darkens the few pixels around them. Over a sunlit facade - which is
     exactly where the trail lands on a phone - one shadow is not enough and a
     heavier scrim would cost the photograph. */
  text-shadow: 0 1px 3px rgba(38, 55, 70, .75), 0 0 14px rgba(38, 55, 70, .5);
}
.lp-crumbs a { color: rgba(255,255,255,.82); transition: color .2s ease; }
.lp-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lp-crumbs a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.lp-crumbs [aria-current] { color: #fff; }
.lp-crumb-sep { color: rgba(255,255,255,.42); }

/* The city, on the photograph, as a plate rather than loose type — the only
   thing that keeps a small label readable over an unknown image. */
.lp-badge {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 700; letter-spacing: .01em; color: #fff;
}
.lp-lead {
  margin: 14px 0 0; max-width: 62ch;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 4px rgba(38, 55, 70, .5);
}

/* --- the strip under the name ------------------------------------------- */
.lp-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(6px);
  font: inherit; font-size: 13px; font-weight: 700; color: #fff;
}
/* The score, its count and whose it is - one chip, and the source is not
   optional decoration on it. See migration 0082: the API will not send a
   number without one. */
.lp-chip-rating { gap: 8px; }
.lp-chip-rating .jpi { color: #FFD166; }
.lp-chip-rating strong { font-size: 14.5px; font-weight: 800; }
.lp-rating-count { font-weight: 600; color: rgba(255,255,255,.78); }
.lp-rating-src {
  padding-left: 8px; border-left: 1px solid rgba(255,255,255,.28);
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.8);
}
.lp-chip-act { cursor: pointer; transition: background .2s ease, transform .2s ease; }
.lp-chip-act:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.lp-chip-act:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* HIDDEN MUST WIN. Most sections on this page are hidden until the API proves
   they have something to say, and `hidden` is only `display: none` at the user
   agent's level - any `display: flex` in this file beats it. Without this, a
   place with no history and one photograph printed "Plan your visit" and
   "Explore in pictures" over nothing, which is exactly the empty heading every
   other rule here exists to avoid. */
.disc [hidden] { display: none !important; }

.lp { display: flex; flex-direction: column; gap: clamp(30px, 4vw, 46px); }
/* THE SPACING IS THE FLEX GAP AND NOTHING ELSE. main.css carries
   `section { padding: 110px 0 }` for the landing page's full-width bands, and
   every section on this page is a <section> - which silently put 220px of
   nothing between each of them, most visibly after a short section like a
   single hotel. The gap above owns the rhythm here. */
.disc .lp-sec { padding: 0; }
/* "View gallery" scrolls to a section, and the bar is fixed over the top of
   the page - without this the heading it lands on sits under the bar. */
.disc .lp-sec { scroll-margin-top: 92px; }
.lp-sec { display: flex; flex-direction: column; gap: 16px; }

.lp-card {
  background: var(--disc-card); border-radius: 20px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--disc-line);
  box-shadow: var(--disc-shadow);
}

/* --- fares ---------------------------------------------------------------
   THREE CARDS, EACH OVER A PHOTOGRAPH OF THIS PLACE, because a row of figures
   is a price list and this is the part of the page where somebody decides to
   go. The photograph is scenery for the figure and never evidence for it: the
   card says where its number came from, or says it has none. */
/* THE CARD IS THE PHOTOGRAPH. A price panel that is a white box with a
   thumbnail on top is a dashboard row; what a travel site puts here is an
   image you can book from - the picture fills the card, the words sit on
   glass over it, and the picture moves when you touch it.

   The three are one row of equal heights because the grid says so, not
   because anything inside them is padded to match. */
.lp-fares { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* ONE PICTURE, AND THE WORDS ON IT. The panel that used to float inside each
   card was a second surface on top of a photograph - a component, where what
   this wants to be is a plate: image, gradient, type. Lower too, because at
   372px three cards were most of a laptop screen for three short facts. */
.lp-fare {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(222px, 19vw, 268px);
  border-radius: 20px;
  background: linear-gradient(150deg, #33556A, #4A7086);
  box-shadow: 0 12px 30px -18px rgba(38, 55, 70, .5);
  transition: transform 320ms cubic-bezier(.22,.8,.3,1), box-shadow 320ms ease;
}
.lp-fare:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -20px rgba(38, 55, 70, .6); }
.lp-fare-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.lp-fare-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.01);        /* hides the edge the scale animation leaves */
  transition: transform 700ms cubic-bezier(.22,.8,.3,1);
}
/* HOVER ZOOM ON THE PICTURE, NOT ON THE CARD, so the rounded corners and the
   glass panel stay exactly where they were and only the photograph moves. */
.lp-fare:hover .lp-fare-art img,
.lp-fare:focus-within .lp-fare-art img { transform: scale(1.09); }
/* THE ONLY THING BETWEEN THE TYPE AND THE PHOTOGRAPH. With no panel to sit
   on, this gradient is doing all of the legibility work, so it is stronger at
   the foot than the hero's and still clear of the top two thirds - the
   picture stays a picture. Tinted to the ink, never to black. */
.lp-fare-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(38,55,70,.02) 0%, rgba(38,55,70,.20) 38%,
    rgba(38,55,70,.62) 72%, rgba(38,55,70,.88) 100%);
}
/* Words on the image. The shadow is what keeps them readable when the
   photograph under them happens to be pale - it costs nothing and it is the
   difference between type on a picture and type lost in one. */
.lp-fare-body {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 20px 22px 22px;
  color: #fff; text-shadow: 0 1px 10px rgba(38, 55, 70, .55);
}
.lp-fare-label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
}
.lp-fare-value {
  margin: 0; display: flex; align-items: baseline; gap: 5px;
  font-family: var(--disc-serif); font-size: clamp(26px, 2.7vw, 34px); font-weight: 700;
  color: #fff; letter-spacing: -.01em;
}
.lp-fare-value span { font-family: var(--ff-body, inherit); font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.82); }
/* Unavailable is a sentence, in the body font, quiet — never a dash and never
   a number nobody can honour. */
.lp-fare.is-empty .lp-fare-value {
  font-family: var(--ff-body, inherit); font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,.88);
}
/* Whose hotel the price is. The photograph is of a particular building, so
   the card names it rather than implying the rate is the area's. */
.lp-fare-credit { margin: 0; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.78); }
/* White button on a photograph: the teal fill has nothing to sit against once
   the background is an image, and white is what every OTA lands on for the
   same reason. */
.lp-fare .disc-btn {
  margin-top: 10px; padding: 9px 17px; font-size: 13px;
  background: #fff; color: var(--disc-accent-deep); text-shadow: none;
  box-shadow: 0 8px 20px -10px rgba(38, 55, 70, .9);
}
.lp-fare .disc-btn:hover { background: #fff; color: var(--disc-ink); transform: translateY(-1px); }
.lp-fare .disc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* NO PHOTOGRAPH: the card keeps its shape and loses the picture, rather than
   borrowing one taken somewhere else. A soft blue-grey panel, ink type, and
   the same glass geometry so the row still lines up. */
.lp-fare.is-artless { background: linear-gradient(155deg, #DCE9F1 0%, #EFF5F9 58%, #E4EEF4 100%); }
/* The mark for what the card sells, large and faint, where the photograph
   would have been. It is drawn rather than photographic on purpose: a drawing
   is obviously a symbol, where a stock photograph of somebody else's hotel
   would read as a picture of this one. */
.lp-fare-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding-bottom: 84px;            /* clear of the panel that sits at the foot */
  color: var(--disc-accent); opacity: .26;
}
/* The size is set here rather than by JPIcon's `size` option: that option
   emits a `jpi-N` class, and 72 is not one of the sizes jp-icons.css defines. */
.lp-fare-mark .jpi, .lp-fare-mark svg { width: 72px; height: 72px; stroke-width: 1.3; }
.lp-fare.is-artless .lp-fare-body { color: var(--disc-ink); text-shadow: none; }
/* AND NO SCRIM, because there is no photograph to darken. It is the pale
   panel that makes the ink readable here; leaving the gradient in place put
   dark type on a dark foot and lost the whole card. */
.lp-fare.is-artless .lp-fare-art::after { content: none; }
.lp-fare.is-artless .lp-fare-label { color: var(--disc-mute); }
/* Without a photograph there is no dark gradient either, so the mark can sit
   where the picture would have been and the type reads as ink on paper. */
.lp-fare.is-artless .lp-fare-mark { padding-bottom: 96px; }
.lp-fare.is-artless .lp-fare-value { color: var(--disc-accent-deep); }
.lp-fare.is-artless .lp-fare-value span,
.lp-fare.is-artless .lp-fare-credit { color: var(--disc-mute); }
.lp-fare.is-artless.is-empty .lp-fare-value { color: var(--disc-mute); }
.lp-fare.is-artless .disc-btn { background: var(--disc-accent); color: #fff; box-shadow: none; }
.lp-fare.is-artless .disc-btn:hover { background: var(--disc-accent-deep); color: #fff; }
.lp-note { margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--disc-mute); max-width: 78ch; }

/* --- the information strip ----------------------------------------------- */
/* FOUR CARDS, NOT A TABLE. They were one panel divided by hairlines, which
   is how a settings screen groups fields; four cards that each lift under the
   pointer is how a travel site presents four separate things worth knowing.
   `auto-fit` takes them to 4 / 2 / 1 across without another breakpoint. */
.lp-quick { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }
.lp-quick-tile {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 20px; border-radius: 18px;
  background: linear-gradient(170deg, #FFFFFF 0%, #FAFCFD 62%, #F2F8FB 100%);
  border: 1px solid var(--disc-line); box-shadow: var(--disc-shadow);
  transition: transform 260ms cubic-bezier(.22,.8,.3,1), box-shadow 260ms ease, border-color 260ms ease;
}
.lp-quick-tile:hover {
  transform: translateY(-4px); box-shadow: var(--disc-shadow-lift);
  border-color: var(--disc-accent-line);
}
.lp-quick-icon {
  flex: none; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--disc-accent), var(--disc-accent-deep));
  box-shadow: 0 8px 18px -10px rgba(62, 122, 146, .9);
}
.lp-quick-text { min-width: 0; }
.lp-quick-label {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--disc-mute);
}
.lp-quick-value { margin: 0; font-size: 16px; font-weight: 700; color: var(--disc-ink); }
.lp-quick-note { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--disc-mute); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.lp-chips span {
  padding: 4px 11px; border-radius: 999px;
  background: var(--disc-accent-soft); border: 1px solid var(--disc-accent-line);
  font-size: 12.5px; font-weight: 700; color: var(--disc-accent-deep);
}

/* --- about ---------------------------------------------------------------
   Two columns, because a 90-character line is unreadable and a 70-character
   one leaves a third of a wide screen empty. The aside carries facts the
   database actually holds — where it is, which area its hotels are filed
   under, how many there are — and disappears with them. */
.lp-about-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.lp-about-col { min-width: 0; }
.lp-about-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* THE PICTURE BESIDE THE TEXT IS THE SECOND PHOTOGRAPH, not the hero again -
   the JS picks it. Tall rather than wide, because it is standing next to a
   column of type and a 16:9 panel beside a 400-word article looks like a
   banner that failed to load. */
.lp-about-art {
  margin: 0; overflow: hidden; border-radius: 20px;
  aspect-ratio: 4 / 5; max-height: 460px;
  background: linear-gradient(135deg, #E3EDF3, #F1F6F9);
  border: 1px solid var(--disc-line); box-shadow: var(--disc-shadow);
}
.lp-about-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms cubic-bezier(.22,.8,.3,1);
}
.lp-about-art:hover img { transform: scale(1.04); }
.lp-about-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lp-about { max-width: 76ch; font-size: 16px; line-height: 1.78; color: var(--disc-ink); }
.lp-about p { margin: 0 0 14px; }
.lp-about p:last-child { margin-bottom: 0; }
/* The clamp fades rather than cuts, so it is obvious there is more. Applied
   in CSS and measured in JS: the button only appears if the text overflows. */
.lp-about.is-clamped {
  max-height: 11.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.lp-more-btn {
  padding: 8px 17px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--disc-accent-line); background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--disc-accent);
  transition: background .2s ease, color .2s ease;
}
.lp-more-btn:hover { background: var(--disc-accent-soft); color: var(--disc-accent-deep); }
.lp-more-btn:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 3px; }
.lp-facts-h { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.lp-facts dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-facts dl > div { display: flex; flex-direction: column; gap: 3px; }
.lp-facts dl > div + div { padding-top: 12px; border-top: 1px solid var(--disc-line); }
.lp-facts dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--disc-mute);
}
.lp-facts dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--disc-ink); }

/* --- hotels near --------------------------------------------------------- */
.lp-hotels-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lp-hotels { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lp-hotel {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--disc-card); border-radius: 16px;
  border: 1px solid var(--disc-line); box-shadow: var(--disc-shadow);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.lp-hotel:hover { transform: translateY(-3px); box-shadow: var(--disc-shadow-lift); border-color: var(--disc-accent-line); }
.lp-hotel-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, #E3EDF3, #F1F6F9); }
.lp-hotel-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-hotel-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; }
.lp-hotel-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.lp-hotel-where { margin: 0; font-size: 12.5px; color: var(--disc-mute); }
.lp-hotel-price { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--disc-accent-deep); }
.lp-hotel-price span { font-size: 12px; font-weight: 600; color: var(--disc-mute); }

/* --- the other places ----------------------------------------------------
   Each card names the AREA its place is filed under. Not a distance: this
   catalogue holds no coordinates, and "2.4 km away" would be a guess wearing
   a decimal point. */
.lp-more { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.lp-near {
  display: flex; align-items: stretch; gap: 14px; min-width: 0;
  padding: 12px; border-radius: 18px;
  background: var(--disc-card); border: 1px solid var(--disc-line); box-shadow: var(--disc-shadow);
  color: var(--disc-ink);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.lp-near:hover { transform: translateY(-3px); box-shadow: var(--disc-shadow-lift); border-color: var(--disc-accent-line); }
.lp-near:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 3px; }
.lp-near-art {
  flex: none; width: 86px; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center; color: var(--disc-accent);
  background: linear-gradient(135deg, #E3EDF3, #F1F6F9);
}
.lp-near-art img { width: 100%; height: 100%; object-fit: cover; }
.lp-near-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px 2px 4px 0; }
.lp-near-name { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.lp-near-where {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--disc-accent-deep);
}
/* Two lines of the one-liner, then an ellipsis: the card is a doorway, not
   the article. */
.lp-near-text {
  font-size: 13px; line-height: 1.5; color: var(--disc-mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- plan your visit ----------------------------------------------------- */
.lp-plan { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.lp-plan-block h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 18px; font-weight: 700;
}
.lp-plan-block h3 .jpi { color: var(--disc-accent); }
.lp-plan-block p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.72; color: var(--disc-ink); }
.lp-plan-block p:last-child { margin-bottom: 0; }
.lp-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lp-tips li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; line-height: 1.62; color: var(--disc-ink);
}
.lp-tips li::before {
  content: ''; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--disc-accent);
}

/* --- the gallery ---------------------------------------------------------
   A ROW THAT SCROLLS, not a grid: these are photographs of one place, and a
   row reads as "more of the same" where a grid reads as a catalogue. Scroll
   snapping so a swipe lands on a photograph, and a focusable container so the
   arrow keys reach it without a mouse. */
.lp-gallery {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--disc-accent-line) transparent;
}
.lp-gallery:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 4px; border-radius: 18px; }
.lp-gallery::-webkit-scrollbar { height: 8px; }
.lp-gallery::-webkit-scrollbar-thumb { background: var(--disc-accent-line); border-radius: 999px; }
.lp-shot {
  flex: none; margin: 0; width: clamp(240px, 26vw, 340px); aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 18px; scroll-snap-align: start;
  background: linear-gradient(135deg, #E3EDF3, #F1F6F9);
  border: 1px solid var(--disc-line); box-shadow: var(--disc-shadow);
}
.lp-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms cubic-bezier(.22,.8,.3,1);
}
.lp-shot:hover img { transform: scale(1.05); }

/* --- status and failure -------------------------------------------------- */
.disc .dh-status { margin: 10px 0; font-size: 14.5px; color: var(--disc-mute); }
.disc .dh-retry {
  margin-top: 4px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--disc-accent-line); background: #fff;
  font-size: 13.5px; font-weight: 700; color: var(--disc-accent); cursor: pointer;
}
.disc .dh-retry:hover { background: var(--disc-accent-soft); }

/* --- arrival ------------------------------------------------------------- */
/* One fade, once, on the body of the page. Cards do not each fly in: eight
   staggered entrances is a slideshow, not a page. */
@keyframes discIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.disc-in { animation: discIn .42s cubic-bezier(.22,.8,.3,1) both; }

/* One column for the About pair before the text column gets narrow enough to
   read badly - 900px is where 1.55fr of the content column falls under 60
   characters, not a device width. Stacked, the picture goes FIRST: a tall
   photograph above the article is a lead image, whereas the same photograph
   under 400 words is a thing nobody scrolls to. */
@media (max-width: 900px) {
  .lp-about-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-about-side { order: -1; }
  .lp-about-art { aspect-ratio: 16 / 10; max-height: 340px; }
}

@media (max-width: 640px) {
  .dl-hero { border-radius: 16px; min-height: 170px; }
  .lp { gap: 26px; }
  .lp-card { border-radius: 16px; }
  /* Still tall enough to be a photograph rather than a strip, but not a whole
     phone screen the traveller has to scroll past to reach a price. */
  .lp-hero { min-height: min(70vh, 460px); min-height: min(70dvh, 460px); }
  /* ON A PHONE THE HERO CROP IS A THIRD OF THE PHOTOGRAPH, and centred it
     lands on sky. Pushed down, it lands on the street the picture is of.
     The corner wash goes too: at this width it covers most of the frame
     rather than the corner, and the picture disappears behind it. */
  .lp-hero-img { object-position: center 64%; }
  .lp-hero::after {
    background: linear-gradient(180deg,
      rgba(38,55,70,.06) 0%, rgba(38,55,70,.26) 44%, rgba(38,55,70,.78) 100%);
  }
  .lp-fare { min-height: 210px; }
  .lp-fare-body { padding: 16px 18px 18px; }
  .lp-hero-meta { gap: 8px; }
  .lp-chip { padding: 8px 13px; font-size: 12.5px; }
  /* The fare button fills its card; the hero chips stay inline, because three
     full-width pills under the name is a menu, not a strip. */
  .lp-fare .disc-btn, .disc-btn { width: 100%; justify-content: center; }
  .lp-chip-act { width: auto; }
  .lp-shot { width: 78vw; }
  .dl-actions .disc-link { padding: 6px 0; }
  /* A tap already moved the page's attention; lifting the card as well makes
     the thing under the finger jump. */
  .dl-grid.is-engaged .dl-card.is-active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .disc-in { animation: none; }
  .dl-card, .dl-img, .lp-hotel, .lp-near, .lp-fare, .lp-shot img,
  .lp-fare-art img, .lp-about-art img, .lp-quick-tile,
  .lp-chip-act, .disc-btn { transition: none; }
  .lp-hero-img { animation: none; }
  .lp-gallery { scroll-snap-type: none; }
  .dl-grid.is-engaged .dl-card.is-active { transform: none; }
  .dl-grid.is-engaged .dl-card.is-active .dl-img { transform: none; }
}