/* ==========================================================================
   Johnflies - homepage slider, real text layers
   Replaces the baked-in poster text with live HTML captions on a photo plate.
   Loaded from header.tpl with ?v= cache-busting. Stage is 1180x420.

   The theme only scales caption *positions* (data-x / data-y), never the type,
   so every size below is expressed in em off one base that follows the slider
   width. That keeps the block exactly proportional to the posters at any
   viewport.  1em = 15px at a 1180px stage.
   ========================================================================== */

@font-face {
  font-family: 'JF Slide Serif';
  src: url('../../fonts/playfair-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JF Slide Serif';
  src: url('../../fonts/playfair-400i.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- caption shell -------------------------------------------------------- */
.bannercontainer {
  container-type: inline-size;
}

.bannercontainer .caption.jfs {
  white-space: normal !important;
  max-width: none;
  pointer-events: auto;
}
.bannercontainer .caption.jfs * { box-sizing: border-box; }
.bannercontainer .caption.jfs .jfs-in {
  font-size: 1.2712vw;   /* fallback */
  font-size: 1.2712cqw;  /* exact: 15px on a 1180px slider */
  width: 42.667em;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* --- eyebrow ------------------------------------------------------------- */
.bannercontainer .caption.jfs .jfs-k {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.733em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74) !important;
}
.bannercontainer .caption.jfs .jfs-k i {
  display: block;
  width: 3.091em;
  height: 0.182em;
  margin-right: 1.091em;
  border-radius: 0.182em;
  background: #f0486b;
}

/* --- headline ------------------------------------------------------------ */
.bannercontainer .caption.jfs .jfs-h {
  margin: 0.298em 0 0 !important;
  padding: 0 !important;
  font-family: 'JF Slide Serif', 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  font-size: 3.133em !important;
  line-height: 1.10 !important;
  letter-spacing: -.005em;
  color: #fff !important;
  text-shadow: 0 0.043em 0.383em rgba(0, 0, 0, .35);
}
.bannercontainer .caption.jfs .jfs-h span { display: block; }
.bannercontainer .caption.jfs .jfs-h em {
  display: block;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #fad6de !important;
}

/* --- body copy ----------------------------------------------------------- */
.bannercontainer .caption.jfs .jfs-p {
  margin: 1.867em 0 0 !important;
  max-width: 28.667em;
  font-size: 1em !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, .84) !important;
  text-shadow: 0 0.067em 0.667em rgba(0, 0, 0, .45);
}

/* --- call to action ------------------------------------------------------ */
.bannercontainer .caption.jfs .jfs-b {
  display: inline-flex;
  align-items: center;
  margin-top: 1.739em;
  padding: 1.217em 2.087em;
  border-radius: 0.522em;
  background: #f0486b;
  box-shadow: 0 1.043em 2.261em -1.043em rgba(240, 72, 107, .95);
  font-size: 0.767em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none !important;
  transition: background .18s ease, transform .18s ease;
}
.bannercontainer .caption.jfs .jfs-b:hover {
  background: #e83056;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.bannercontainer .caption.jfs .jfs-a {
  margin-left: 0.783em;
  font-style: normal;
  font-weight: 700;
}
.bannercontainer .caption.jfs .jfs-cr {
  display: block;
  margin-top: 4.211em;
  font-size: 0.633em !important;
  font-weight: 700;
  line-height: 1 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .46) !important;
}