/* ---------------------------------------------------------------------------
   lewishunterspeaks.com — site-specific additions.

   Loaded AFTER css/styles.css, which is copied verbatim from the lewis-hunter.com
   brand system. Nothing in here overrides brand tokens: it only adds the few
   components this site needs that the main site doesn't have.
   --------------------------------------------------------------------------- */

/* ---- The routing fork on the home page ---------------------------------- */
/* Two large photographic tiles. This is the whole point of the home page, so
   they are deliberately big, image-led and obviously clickable. */

.route-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.route-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card, 14px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

/* Positive stacking only: image at 0, scrim at 1, copy at 2. Negative z-index
   inside an isolated stacking context renders inconsistently, so it is avoided. */
.route-tile__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

/* Dark scrim so the copy stays readable over any photograph. Stronger at the
   bottom where the text sits. */
.route-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.9) 0%,
    rgba(10, 10, 10, 0.7) 34%,
    rgba(10, 10, 10, 0.26) 66%,
    rgba(10, 10, 10, 0.1) 100%
  );
}

.route-tile:hover,
.route-tile:focus-visible {
  border-color: var(--border-gold);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.route-tile:hover .route-tile__img,
.route-tile:focus-visible .route-tile__img {
  transform: scale(1.05);
}

.route-tile__body {
  position: relative;
  z-index: 2;
  padding: var(--s-5) var(--s-4) var(--s-4);
}

/* The label sits over the lightest, busiest part of the photograph, where plain
   gold text disappears. A solid chip keeps it legible whatever is behind it. */
.route-tile__body .eyebrow {
  display: inline-block;
  padding: 7px 14px;
  background: rgba(10, 10, 10, 0.82);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  color: var(--gold-bright);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.route-tile__body h3 {
  margin: 10px 0 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
}

.route-tile__body p {
  margin: 14px 0 0;
  color: var(--text-dim);
  max-width: 42ch;
}

.route-tile .link-arrow {
  margin-top: var(--s-3);
  display: inline-block;
}

.route-tile:hover .link-arrow {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

/* ---- Heavy hero scrim ---------------------------------------------------- */
/* Some of the best stage photographs are also the busiest: lit LED walls, stage
   lighting, bright museum interiors. The brand hero filters alone don't buy
   enough contrast for the lede to stay readable over those, so this adds a
   vertical scrim on top of the image without touching the shared hero styles. */

.hero--scrim-heavy .hero__bg {
  filter: saturate(0.94) contrast(1.02) brightness(1);
}

/* Darkens the upper band where the headline sits and the very bottom behind the
   buttons, while leaving the middle of the frame alone so the subject of the
   photograph stays visible. */
.hero--scrim-heavy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.6) 0%,
      rgba(10, 10, 10, 0.42) 30%,
      rgba(10, 10, 10, 0.16) 58%,
      rgba(10, 10, 10, 0.3) 80%,
      rgba(10, 10, 10, 0.58) 100%
    );
}

.hero--scrim-heavy .hero__inner {
  position: relative;
  z-index: 2;
}

/* ---- Venue grid ----------------------------------------------------------- */
/* A flat, evenly weighted group. No feature tile: every venue is presented as
   equal evidence, and every one carries a caption. The caption sits under the
   photograph rather than over it so it is always legible regardless of what the
   image is doing behind it. */

.venue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

.venue {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card, 14px);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.venue:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
}

.venue__shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-3);
}

.venue__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
  transition: transform 0.6s var(--ease);
}

.venue:hover .venue__shot img { transform: scale(1.04); }

.venue__cap {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--border);
}

.venue__cap b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--bone);
}

.venue__cap span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 900px) {
  .venue-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .venue-grid { grid-template-columns: 1fr; }
}

/* ---- Stage gallery captions ---------------------------------------------- */
/* The photographs only do their job if it is obvious where each one was taken,
   so every tile carries the venue. The shared .stage-gallery grid is untouched;
   this only adds the caption layer on top of each item. */

.stage-gallery__item { position: relative; }

.stage-gallery__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 44px 20px 16px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.94) 0%,
    rgba(10, 10, 10, 0.7) 45%,
    rgba(10, 10, 10, 0) 100%
  );
}

.stage-gallery__cap b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--bone);
}

.stage-gallery__cap span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The first tile is the large feature, so its caption carries more weight. */
.stage-gallery__item:first-child .stage-gallery__cap { padding: 60px 28px 24px; }
.stage-gallery__item:first-child .stage-gallery__cap b { font-size: 30px; }
.stage-gallery__item:first-child .stage-gallery__cap span { font-size: 12.5px; margin-top: 8px; }

@media (max-width: 860px) {
  .stage-gallery__cap { padding: 34px 16px 12px; }
  .stage-gallery__cap b { font-size: 16px; }
  .stage-gallery__item:first-child .stage-gallery__cap b { font-size: 22px; }
}

/* ---- Obvious links ------------------------------------------------------- */
/* Gold text alone did not read as clickable, so links carry an underline and
   an arrow, and the whole card lifts on hover. */

.dl {
  color: var(--gold);
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.dl:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

.lnk {
  display: inline-block;
  font-weight: 700;
  color: #8A6D1F;
  border-bottom: 2px solid rgba(138, 109, 31, 0.35);
  padding-bottom: 2px;
  margin-top: 4px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lnk:hover { color: #6B540F; border-color: #6B540F; }

/* The link cards are whole targets, so make them feel like it. */
.lcard { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.lcard:has(.lnk):hover { transform: translateY(-4px); }

/* ---- Fact rows (plain proof, no decoration) ------------------------------ */

.factlist {
  display: grid;
  gap: 0;
  margin-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.factrow {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.factrow__k {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.2;
}

.factrow__v {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.75;
}

/* On bone/cream sections the gold needs to darken to stay legible. */
.band-bone .factlist { border-top-color: rgba(20, 15, 5, 0.12); }
.band-bone .factrow { border-bottom-color: rgba(20, 15, 5, 0.12); }
.band-bone .factrow__k { color: #8A6D1F; }
.band-bone .factrow__v { color: #514C44; }

/* ---- Enquiry form -------------------------------------------------------- */

.enquiry-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.enquiry-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.enquiry-form label > span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="url"],
.enquiry-form select,
.enquiry-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(245, 240, 232, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(245, 240, 232, 0.07);
}

.enquiry-form textarea { min-height: 150px; resize: vertical; }

.enquiry-form label { display: block; margin-bottom: var(--s-3); }

.enquiry-form option { background: var(--bg-2); color: var(--text); }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
  .route-tiles { grid-template-columns: 1fr; }
  .route-tile { min-height: 380px; }
  .factrow { grid-template-columns: 1fr; gap: 6px; }
  .enquiry-form .form-row { grid-template-columns: 1fr; }
}