/* =====================================================================
   ttlm — main slider on PHONES (< 768px) — TEMPORARY, goes with
   custom-hero-section.html

   Below lg the hero is a Slick carousel in center mode: the current slide
   is the viewport minus Slick's centerPadding on each side (80px under
   480px, 150px up to 1199px — carousel-handler.js). The template expects
   portrait/square mobile images there, which look big even at that width.
   This campaign has no mobile slides yet, so custom-hero-section.html feeds
   it the desktop (landscape) images, and at ~215px wide on a phone they
   look tiny next to other matching campaigns.

   Fix, on phones only (tablets keep the template's 150px center padding,
   per request): shrink that side padding so the current slide is nearly
   full width. Slick writes the padding inline on .slick-list and then
   measures the list's content width to size the slides, so an !important
   override here is picked up by its own math and the slide stays centered
   (the padding is symmetric). Remove this file (and its overrides.json
   line) together with custom-hero-section.html once real mobile images are
   uploaded — portrait images at this width would be far too tall.
   ===================================================================== */

section.hero__area {
  padding-top: 47px;
  padding-bottom: 47px;
}

/* The shared responsive.css sets .hero__single__slide a { width: 73px !important }
   for the video play button — override it for our clickable slide wrapper. */
.hero__single__slide a[target="_blank"] {
  width: 100% !important;
}

.hero__single__slide a[target="_blank"]:hover img {
  filter: none;
}

@media (min-width: 320px) and (max-width: 1094px) {
  section.hero__area {
    padding-top: 27px;
    padding-bottom: 27px;
  }
}

@media (max-width: 767.98px) {
  .hero__slider.d-lg-none .slick-list {
    padding: 0 6px !important; /* was 80px each side (20px under 320px) — just a sliver of margin */
  }
}