/* =============================================================================
   Jane's Spaniels and Cavaliers — site fixes and hero redesign.

   1. Restores Elementor's responsive visibility rules. The site is a static
      mirror and the generated kit stylesheet that normally defines
      .elementor-hidden-{mobile,tablet,desktop} was never captured (post-7.css
      404s), so every breakpoint variant rendered at once — which is why the
      hero appeared three times. Breakpoints match this build's
      elementorFrontendConfig: mobile <=767, tablet <=1024.

   2. Art-directs the hero per breakpoint and lays out its copy.
   ========================================================================== */

/* ---- 2. Hero ------------------------------------------------------------
   Wide crop of the litter on tablet/desktop, portrait crop of a single puppy
   on phones. Both sources are TikTok covers cropped to exclude the black bars
   and the caption baked into the picture. Copy sits at the bottom over a
   gradient scrim so it stays legible without flattening the photo.          */

.elementor-element-9878f6c,
.elementor-element-fbb77a2,
.elementor-element-19c920d {
  background-color: #14100e !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 34%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.85) 100%),
    url('/wp-content/uploads/2025/08/janes-hero-wide.webp') !important;
  background-size: cover !important;
  background-position: center 58% !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  min-height: clamp(430px, 52vw, 660px) !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.elementor-element-9878f6c > .e-con-inner,
.elementor-element-fbb77a2 > .e-con-inner,
.elementor-element-19c920d > .e-con-inner {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 30px 52px !important;
}

.elementor-element-9878f6c .elementor-heading-title,
.elementor-element-fbb77a2 .elementor-heading-title,
.elementor-element-19c920d .elementor-heading-title {
  color: #fff !important;
  font-size: clamp(2.1rem, 5.2vw, 4.2rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 14px !important;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(0,0,0,.6) !important;
}

/* Standfirst under the headline. */
.jsc-hero-sub {
  color: rgba(255,255,255,.94) !important;
  font-size: clamp(1rem, 1.45vw, 1.2rem) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  max-width: 46ch !important;
  margin: 0 0 26px !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.7) !important;
}

.elementor-element-9878f6c .elementor-button,
.elementor-element-fbb77a2 .elementor-button,
.elementor-element-19c920d .elementor-button {
  background-color: #e8763b !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 16px 34px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.38) !important;
  transition: transform .18s ease, background-color .18s ease !important;
}

.elementor-element-9878f6c .elementor-button:hover,
.elementor-element-fbb77a2 .elementor-button:hover,
.elementor-element-19c920d .elementor-button:hover {
  background-color: #d2652c !important;
  transform: translateY(-2px) !important;
}

/* ---- Phones -------------------------------------------------------------
   Portrait source anchored to the top so the puppy's face stays in frame,
   copy centred in the darkened lower third. svh keeps the hero clear of iOS
   browser chrome; the vh line above it is the fallback.                     */
@media (max-width: 767px) {
  .elementor-element-9878f6c,
  .elementor-element-fbb77a2,
  .elementor-element-19c920d {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.04) 22%, rgba(0,0,0,.48) 56%, rgba(0,0,0,.90) 100%),
      url('/wp-content/uploads/2025/08/janes-hero-mobile.webp') !important;
    background-position: center top !important;
    min-height: 86vh !important;
    min-height: 86svh !important;
  }

  .elementor-element-9878f6c > .e-con-inner,
  .elementor-element-fbb77a2 > .e-con-inner,
  .elementor-element-19c920d > .e-con-inner {
    padding: 0 22px 38px !important;
    text-align: center !important;
  }

  .elementor-element-9878f6c .elementor-widget-heading,
  .elementor-element-fbb77a2 .elementor-widget-heading,
  .elementor-element-19c920d .elementor-widget-heading,
  .elementor-element-9878f6c .elementor-heading-title,
  .elementor-element-fbb77a2 .elementor-heading-title,
  .elementor-element-19c920d .elementor-heading-title {
    text-align: center !important;
  }

  .elementor-element-9878f6c .elementor-heading-title,
  .elementor-element-fbb77a2 .elementor-heading-title,
  .elementor-element-19c920d .elementor-heading-title {
    font-size: clamp(1.85rem, 8.4vw, 2.6rem) !important;
    line-height: 1.08 !important;
    margin: 0 0 12px !important;
  }

  .jsc-hero-sub {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin: 0 auto 22px !important;
    max-width: 34ch !important;
    text-align: center !important;
  }

  .elementor-element-9878f6c .elementor-button,
  .elementor-element-fbb77a2 .elementor-button,
  .elementor-element-19c920d .elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 330px !important;
    min-height: 54px !important;
    padding: 15px 26px !important;
    font-size: .98rem !important;
  }

  .elementor-element-9878f6c .elementor-widget-button,
  .elementor-element-fbb77a2 .elementor-widget-button,
  .elementor-element-19c920d .elementor-widget-button {
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  .elementor-element-9878f6c .elementor-heading-title,
  .elementor-element-fbb77a2 .elementor-heading-title,
  .elementor-element-19c920d .elementor-heading-title {
    font-size: 1.72rem !important;
  }
  .jsc-hero-sub { font-size: .95rem !important; }
}

/* ---- Header logo --------------------------------------------------------
   The wordmark is ~3:1 where the previous mark was square, so cap it by
   height and let width follow instead of inheriting the old square sizing.  */
.site-logo-img img,
.astra-logo-svg,
.custom-logo-link img,
img[src*="janes-logo"] {
  height: auto !important;
  max-height: 76px !important;
  width: auto !important;
  max-width: min(360px, 62vw) !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  .site-logo-img img,
  .astra-logo-svg,
  .custom-logo-link img,
  img[src*="janes-logo"] {
    max-height: 54px !important;
    max-width: min(260px, 66vw) !important;
  }
}

/* ---- 1. Elementor responsive visibility (restored) ----------------------
   Deliberately last, and qualified with .elementor-element so it outranks the
   per-element hero rules above. Those set display:flex !important on all three
   breakpoint variants; at equal specificity the hero rules would win on source
   order and every variant would stay on screen.                             */
@media (max-width: 767px) {
  .elementor-element.elementor-hidden-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.elementor-hidden-tablet { display: none !important; }
}
@media (min-width: 1025px) {
  .elementor-element.elementor-hidden-desktop { display: none !important; }
}