.instagram-embed-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.instagram-embed-container blockquote.instagram-media,
.instagram-embed-container iframe {
  border: 1px solid #e0e0e0 !important;
  border-radius: 0.5rem !important;
  overflow: hidden;
  flex: 1 1 calc(25% - 2rem);  /* base: 4 per row */
  box-shadow: 0 0 15px -10px rgba(0, 0, 0, 0.8) !important;
  min-width: 0;  /* prevents overflow issues */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .instagram-embed-container blockquote.instagram-media,
  .instagram-embed-container iframe {
    flex: 1 1 calc(50% - 2rem);  /* 2 per row under 768px */
  }
}

#social-subtitle {
  color: var(--tln-dark-grey);
}


section {
    position: relative;
    width: 100%; 
    margin: auto;
    padding: 4rem;
}

.section-content {
    max-width: 2000px;
    margin: auto;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; /* prevent line breaks */
  border: 0;
}

/* ---------- Header ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.section-title {
  margin: 0;
  color: var(--tln-light-grey);
}
.section-subtitle {
  margin: 0 !important;
  color: var(--tln-purple);
}
.section-description {
  margin: 1rem auto auto;
  font-size: 2rem;
  font-weight: 500;
}
@media (max-width: 580px) {
  section {
    padding: 3rem 2rem;
  }
  .section-head {
    justify-content: center;
  }
  .section-title {
    text-align: center;
    font-size: 2.5rem;
  }
  .section-subtitle {
    font-size: 2rem;
  }
  .section-description {
    text-align: center;
    font-size: 1.6rem;
  }
}

/*========================================================
******* A D  L E A D E R B O A R D  S E C T I O N ********
=========================================================*/
.ad-block { 
  width: 100%; 
  display: block;
  background: radial-gradient(#ffffff, var(--tln-light-grey));
 }
 .ad-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
 }
.ad-slot {
  width: 100%;
  max-height: 90px;
  max-width: 728px;
}

.ad-block iframe {
    width: 100% !important;
    box-shadow: 0px 0px 12px -8px black;
}

@media (max-width: 768px) { /* mobile */
  .ad-block { 
    padding: 1.5rem 2rem;
  }
  .ad-row {
    gap: 1rem;
  }
  .ad-slot { 
    max-height: 50px;
    max-width: 300px;
   }  /* 320x50 / 300x50 */
}

/*===========================================
******** S L I D E R  S E C T I O N *********
=============================================*/

/* Section wrapper */
#slider-section { 
  overflow: hidden;
  padding: 0 !important;
}

/* Relative container so arrows/progress/overlay can absolutely position */
#slider-section .slider-wrapper { 
  position: relative; 
  width: 100%; 
}

#slider-section .slider-viewport {
  display: flex;
  gap: 0;
  will-change: transform;
  transition: transform 500ms;   /* JS may override */
  width: auto;                   /* sum of children */
  transform: translate3d(0,0,0);
}

/* One slide = one viewport width (direct child is <article class="slide">) */
#slider-section .slider-viewport > .slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;            /* overlay positioning */
  box-sizing: border-box;
  aspect-ratio: 1920 / 560;      /* desktop hero height */
}

/* Anchor fills the slide’s box */
#slider-section .slide-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* Small screens use a taller ratio */
@media (max-width: 1100px) {
  #slider-section .slider-viewport > .slide { 
    aspect-ratio: 1200 / 800;
  }
}

/* Images fill the frame */
#slider-section .slide-link picture,
#slider-section .slide-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0; 
  border: 0; 
  box-sizing: border-box;
}

/* Progress bar (JS-controlled width) */
#slider-section .slider-bar {
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0;
  height: 4px; 
  background: #e5e5e5; 
  z-index: 3;
}
#slider-section .progress-timer {
  height: 100%;
  width: 0%;
  background: var(--tln-red, #c62828);  /* visible even if var missing */
}

/* Arrows */
#slider-section .slider-previous,
#slider-section .slider-next {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  border: 0; 
  background: none; 
  color: var(--tln-white, #fff);
  font-size: 4rem; 
  padding: 1rem; 
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0px 3px 5px black); 
  z-index: 4; /* above overlay */
}
#slider-section .slider-previous { left: 0 }
#slider-section .slider-next     { right: 0 }
#slider-section .slider-previous:focus-visible,
#slider-section .slider-next:focus-visible { 
  outline: 2px solid #fff; 
  outline-offset: 2px; 
}

/* ======================================================
   Content overlay (for "slide--banner" with text fields)
   ------------------------------------------------------
   Desktop (>=1100px): left panel ~50% width, full height
   Mobile/Tablet: compact pill at bottom-left
   ====================================================== */

/* Base overlay styles shared across breakpoints */
#slider-section .slide-overlay {
  position: absolute;
  pointer-events: auto;        /* allows button/links inside overlay */
  color: #fff;
  z-index: 2;                  /* above image, below arrows */
}

/* Typography + spacing tokens */
#slider-section .slide-tag {
  display: inline-block;
  font-weight: 600;
  border-radius: .5rem;
  background: #fff;
  width: fit-content;
}
#slider-section .slide-title {
  color: var(--tln-light-grey);
  font-weight: 800;
  font-size: 6rem;
  text-transform: capitalize;
}
#slider-section .slide-desc {
  margin-top: .25rem;
  font-size: clamp(.95rem, 1.4vw, 1.125rem);
  line-height: 1.4;
  opacity: .95;
}
#slider-section .slide-logo {
  height: clamp(28px, 6vw, 56px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  margin-top: .25rem;
}
#slider-section .slide-actions { 
  margin-top: .65rem; 
}

/* CTA button (“View more”) */
#slider-section .slide-cta {
  display: inline-block;
  padding: .65rem 1rem;
  border-radius: .5rem;
  background: #fff;
  color: #111;
  text-decoration: none;
}
#slider-section .slide-cta:hover {

}

/* Readability on busy art */
#slider-section .slide-title,
#slider-section .slide-desc {
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Clamp long text to keep overlays tidy */
#slider-section .slide-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* 2 lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#slider-section .slide-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;     /* 3 lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* DESKTOP — cover ~50% of the LEFT side, full height */
@media (min-width: 1100px) {
  #slider-section .slide-overlay {
    top: 0; bottom: 0; left: 0; right: auto;
    width: 50%;                       /* ~half the slide */
    max-width: 980px;                 /* safety cap on ultrawide */
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    /* Gentle fade so the image stays readable on the right */
    background: linear-gradient(
      90deg,
      rgba(5, 15, 23, 1),
      rgba(5, 15, 23, .55),
      rgba(5, 15, 23, 0.01)
    );
  }

  /* Fine-tune inner spacing */
  #slider-section .slide-tag { margin-bottom: .35rem; }
  #slider-section .slide-title { margin-top: .15rem; }
  #slider-section .slide-desc { margin-top: .25rem; }
  #slider-section .slide-actions { margin-top: .65rem; }
}

/* MOBILE & TABLET — float as a small pill near bottom-left */
@media (max-width: 1099.98px) {
  #slider-section .slide-overlay {
    left: clamp(.75rem, 3.5vw, 1rem);
    right: auto;
    bottom: clamp(.75rem, 3.5vw, 1rem);
    top: auto;

    width: auto;
    max-width: min(85%, 46ch);     /* keep it compact */
    padding: .75rem .9rem;
    border-radius: .75rem;

    background: rgba(0,0,0,.36);  /* semi-transparent pill */
    backdrop-filter: saturate(115%) blur(2px);
    display: grid;
    gap: .4rem;
  }

  /* Tighten typography on small screens */
  #slider-section .slide-title {
    font-weight: 800;
    font-size: clamp(1rem, 5vw, 1.25rem);
    line-height: 1.15;
  }
  #slider-section .slide-desc {
    font-size: clamp(.85rem, 3.8vw, .95rem);
    line-height: 1.3;
  }
  #slider-section .slide-cta {
    padding: .55rem .85rem;
    font-size: .9rem;
  }

  /* Optional: hide desc on very small phones to avoid obstruction */
  @media (max-width: 400px) {
    #slider-section .slide-desc { display: none; }
  }
}

/* Accessibility & motion preferences */
@media (prefers-reduced-motion: reduce) {
  #slider-section .slide-cta { transition: none !important; }
}


/*===========================================
**** P R O G R A M I N G  S E C T I O N *****
=============================================*/

/* ---------- Section Shell ---------- */
#featured-section {
  background: var(--tln-purple);
}
#featured-container {
  width: 100%;
  margin: 0 auto;
}
.tln-eyebrow {
  /* smaller on mobile; scale up on desktop */
  font-size: 1.6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tln-light-grey);
  margin: 0;
}

@media (max-width: 580px) {
  .programming-head {
    justify-content: center;
  }
  .tln-eyebrow {
    text-align: center;
  }
}
/* ---------- Layout ---------- */
.programming-wrapper {
  display: flex;
  gap: 2rem;
}

/* ---------- Card ---------- */
.tln-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0px 0px 15px -5px black;
}
#tln-schedule-card, #tln-featured-card {
  color: var(--tln-dark-grey);
  background: var(--tln-light-grey);
  border: 1px solid color-mix(in oklab, var(--tln-purple) var(--tln-border-alpha), transparent 0%);
}

#tln-schedule-card {
  width: 30%;
}
#tln-featured-card { 
  width: 70%;
}
#tln-schedule-card .section-subtitle {
  display: inline-block;
}
@media (max-width: 580px) {
  .tln-card {
    padding: 1rem;
    gap: 1rem;
  }
}

/* ---------- Inline Layout Bits ---------- */
.tln-row, .title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}
.tln-muted { 
  opacity: .85;
 }
#schedule-header-row {
  justify-content: space-between;
}
/* ---------- “On Now” Dot & Progress ---------- */
.tln-now-dot {
  width: .6rem;
  height: .6rem;
  margin-bottom: .5rem;
  border-radius: 999px;
  background: var(--tln-red);
  display: inline-block;
  animation: tln-pulse 1.2s infinite ease-in-out;
}


/* Keep keyframes OUTSIDE media queries */
@keyframes tln-pulse {
  0% { opacity: .35; }
  50% { opacity: 1; }
  100% { opacity: .35; }
}

/* Honor reduced motion user setting */
@media (prefers-reduced-motion: reduce) {
  .tln-now-dot { animation: none; }
}

/* Progress bar */
.tln-progress {
  height: .35rem;
  background: color-mix(in oklab, var(--tln-red) 20%, transparent 0%);
  border-radius: .25rem;
  overflow: hidden;
}
.tln-progress > #tln-progressbar {
  height: 100%;
  width: 0; /* JS updates this */
  background: var(--tln-red);
  transition: width .3s linear;
}

/* ---------- Badges ---------- */
.tln-badge {
    font-size: 1.4rem;
    background: #d0d0d0;
    color: var(--tln-purple);
    padding: .15rem .5rem;
    border-radius: .5rem;
    border: 1px solid
  color-mix(in oklab, var(--tln-light-grey) 40%, transparent 0%);
}

/* ---------- Schedule Typography ---------- */
.schedule-time { 
  font-size: 1.4rem;
 }
.schedule-title {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0.25rem 0 0.5rem;
}
.schedule-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Up Next List ---------- */
.tln-upnext { 
  display: flex;
  flex-direction: column;
  gap: .5rem;
  list-style: none; 
  margin: 1rem 0 0;
  padding: 0; 
}
.tln-upnext li {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem;
  margin: auto;
  border: 1px solid color-mix(in oklab, var(--tln-purple) 20%, transparent 0%);
  border-radius: .5rem;
}
.tln-upnext li:hover {
  background: color-mix(in oklab, var(--tln-purple) 60%, black 0%);
}

@media (max-width: 1600px) {
  .tln-upnext li:nth-child(4) {
    display: none;
  }
}
@media (max-width: 1300px) {
  .tln-upnext li:nth-child(3) {
    display: none;
  }
}
@media (max-width: 1100px) {
  .tln-upnext li:nth-child(3) {
    display: block;
  }
}

/* ---------- Carousel (4-up desktop) ---------- */
#featured-header {
    justify-content: space-between;
}
.poster-track {
  position: relative;
  z-index: 0;
  display: grid;
  grid-auto-flow: column;                 /* lay cards left→right */
  align-items: center;
  column-gap: 1rem;
  margin: 0;
  overflow: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

#featured-track {
  grid-auto-columns: calc((100% - 3rem) / 4); /* 4 columns visible */
}
#soccer-track {
  grid-auto-columns: calc((100% - 5rem) / 6); /* 6 columns visible */
}

.tln-poster {
  scroll-snap-align: start;
}

.tln-poster .frame{
  display: block;            /* ensure it’s a block-level box */
  position: relative;        /* <— critical so the img absolute is scoped */
  overflow: hidden;          /* clip image edges to rounded corners */
  aspect-ratio: 2 / 3;       /* your existing ratio for desktop */
  border-radius: .5rem;
  background: black;
}
.frame:hover {
    scale: 0.98;
    box-shadow: 0px 0px 15px -10px black;
}
.tln-poster img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title overlay (hidden by default) */
.tln-grad {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .5rem .6rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color: #fff;
  display: none; /* default hidden; shown on mobile */
}
.tln-title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* clamp to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* --- Responsive: 2-up tablets --- */
@media (max-width: 1100px) {
  .programming-wrapper { 
    flex-direction: column;
  }
  #tln-schedule-card, #tln-featured-card { 
    width: 100%;
  }
  #featured-track {
    grid-auto-columns: calc((100% - 2rem) / 3); /* 3 visible */
  }
}

/* --- Responsive: 1-up small phones --- */
@media (max-width: 768px){
  /* Two rows; each column holds up to 2 posters (stacked) */
  .poster-track{
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-columns: calc((100% - .75rem) / 2); /* 2 columns visible */
    column-gap: .75rem;
    row-gap: .75rem; /* space between the two rows */
  }
}
/* Mobile ≤ 580px: use landscape and show title */
@media (max-width: 580px){
  .tln-grad { display: block; }
}
/* ---------- Buttons ---------- */
.tln-button {
  display: block;
  margin: 0 !important;
  padding: 0.8rem;
  font-weight: 700;
  border-radius: 0.5rem;
}
.track-btn {
  font-size: 3rem;
  padding: 0 1rem 0.3rem;
  border-radius: 0.5rem;
  touch-action: manipulation;   /* iOS 13+/Android: disables double-tap zoom & 300ms delay */
  -ms-touch-action: manipulation; /* old Edge */
}
.track-btn:hover {
    text-decoration: none;
    background: transparent;
}
.track-btn:focus {
  text-decoration: none;
}

#featured-prev, #featured-next {
  background: var(--tln-purple);
  border: 2px solid var(--tln-purple);
}
#featured-prev:hover, #featured-next:hover {
    color: var(--tln-purple);
    background: transparent;
}

@media (max-width: 580px) {
  .track-btn {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }

}

.programming-button {
    border: 2px solid var(--tln-purple);
    color: var(--tln-white);
    text-decoration: none;
    text-align: center;
    background: var(--tln-purple);
    box-shadow: 0px 0px 10px -6px var(--tln-dark-grey);
}

.programming-button:hover {
  color: var(--tln-purple);
  background: var(--tln-light-grey);
}


/* ---------- Screen Reader Utility ---------- */
.tln-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================
   Responsive Enhancements
   ========================================== */
@media (min-width: 1500px) {
  section {
      padding: 4rem 6rem;
  }
  .programming-wrapper {
    gap: 4rem;
  }
}




/*===========================================
******** S O C C E R  S E C T I O N *********
=============================================*/
#soccer-section {
    position: relative;
    background: linear-gradient(0deg, var(--tln-indigo), var(--tln-indigo), #071422);
}

#soccer-subtitle {
    color: var(--tln-light-grey);
}
#soccer-header {
    justify-content: space-between;
}
#soccer-description {
    color: var(--tln-light-grey);
}

#soccer-prev, #soccer-next {
  color: var(--tln-indigo);
  background: var(--tln-light-grey);
  border: 2px solid var(--tln-light-grey);
}
#soccer-prev:hover, #soccer-next:hover {
  color: var(--tln-light-grey);
  background: transparent;
}

.soccer-button {
  border: 2px solid var(--tln-light-grey);
  color: var(--tln-indigo);
  text-decoration: none;
  text-align: center;
  background: var(--tln-light-grey);
  box-shadow: 0px 0px 10px -6px var(--tln-dark-grey);
}

.soccer-button:hover {
  color: var(--tln-light-grey);
  background: var(--tln-indigo);
}

@media (max-width: 1100px) {
  #soccer-track {
      grid-auto-columns: calc((100% - 2rem) / 3);
  }
}

@media (max-width: 580px) {
  #soccer-subtitle {
      width: 50%;
  }
}


/*===========================================
******** R E C I P E  S E C T I O N *********
=============================================*/
#recipes-section{
  position: relative;
  background:
    radial-gradient(1000px 400px at 10% -10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #038a4d 0%, var(--tln-green) 60%);
  color: var(--tln-white);
}
#recipes-section .recipes-container{
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.recipes-cta {
    text-align: center;
    width: 100%;
    border: 2px solid var(--tln-light-grey);
    background: var(--tln-light-grey);
    color: var(--tln-green);
    text-decoration: none;
}
.recipes-cta:hover{
  background: transparent;
  color: var(--tln-light-grey);
}

/* Recipes Grid */
#recipes-header {
    justify-content: space-between;
}
#recipe-subtitle {
    color: var(--tln-light-grey);
}
#recipes-prev, #recipes-next {
    color: var(--tln-green);
    background: var(--tln-light-grey);
    border: 2px solid var(--tln-light-grey);
}
#recipes-prev:hover , #recipes-next:hover {
  color: var(--tln-light-grey);
  background: var(--tln-green);
}
/* =========================
   Recipe grid & cards
   ========================= */
.recipes-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.recipe-card{
  grid-column: span 3;
  background: var(--tln-light-grey, #f5f5f5);
  border: 2px solid var(--tln-light-grey, #f5f5f5);
  border-radius: .5rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.recipe-card:hover{
  scale: .98;
  box-shadow: 0 0 15px -10px rgba(0,0,0,.6);
}

/* Placeholder & crossfade */
.recipe-frame{ position: relative; display: block; }
.recipe-media{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.recipe-media img,
.recipe-media picture{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* New media layer fades in */
.swap-new{
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .26s ease;
}
.swap-new.swap-in{ opacity: 1; }

/* Title/excerpt fade (Chrome-friendly) */
.recipe-meta{
  padding: .9rem;
  transition: opacity .26s ease, transform .26s ease;
  will-change: opacity, transform;
}
.recipe-meta.__swap-out{
  opacity: 0;
  transform: translateY(4px);
}
.recipe-meta.__swap-in{
  opacity: 1;
  transform: none;
}

.recipe-title{
  font-size: 2rem !important;
  font-weight: 500;
  margin: 0;
  text-align: left;
}
p.recipe-excerpt{ margin: .5rem 0 0; }

/* Base: ensure children are animatable */
.recipe-meta .recipe-title,
.recipe-meta .recipe-excerpt {
  opacity: 1;
  transform: none;
  will-change: opacity, transform;
}

/* Fade OUT current text */
.recipe-meta.__swap-out .recipe-title,
.recipe-meta.__swap-out .recipe-excerpt {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Fade IN new text */
.recipe-meta.__swap-in .recipe-title,
.recipe-meta.__swap-in .recipe-excerpt {
  opacity: 1;
  transform: none;
  transition: opacity .24s ease, transform .24s ease;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .recipe-meta .recipe-title,
  .recipe-meta .recipe-excerpt {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Badge on image */
.recipe-frame .badge{
  position: absolute;
  width: fit-content;
  right: .5rem;
  left: .5rem;
  bottom: .5rem;
  padding: .45rem .6rem;
  border-radius: .5rem;
  font-weight: 600;
  color: var(--tln-white, #fff);
  background: rgba(0,0,0,.66);
}

/* Optional skeleton while images decode */
.skeleton{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #eee, #f6f6f6 35%, #eee 65%);
  background-size: 200px 100%;
  animation: sk 1.2s infinite linear;
}
@keyframes sk{
  0%{ background-position:-200px 0; }
  100%{ background-position: 200px 0; }
}

/* Busy guard (prevents double taps during crossfade) */
#tln-recipes-card.__busy,
#tln-recipes-card .__busy{ pointer-events: none; }

/* Responsive columns */
@media (max-width: 1100px){
  .recipe-card{ grid-column: span 6; }
}
@media (max-width: 580px){
  .recipe-title, .recipe-frame .badge{ 
    font-size: 1.4rem !important;

  }
}

/* =========================
   Chef reel
   ========================= */
.chef-reel{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-block: .5rem;
}
/* Lock the reel to horizontal panning; stop scroll chaining to page */
.chef-reel{
  user-select: none; 
  -webkit-user-drag: none;
  overscroll-behavior-x: contain;    /* prevent parent scroll on edge bounces */
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  -ms-overflow-style: none; scrollbar-width: none;
}
.chef-reel::-webkit-scrollbar{ display: none; }

.reel-track{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  white-space: nowrap;
}

/* Pills */
.chef-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: fit-content;
  gap: 1rem;
  padding: 0 1.5rem 0 0;
  border-radius: 999px;
  background: var(--tln-green, #f2f2f2);
  border: 1px solid #e6e7e85e;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chef-pill:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px -12px rgba(0,0,0,.4); }
.chef-pill:active{ transform: translateY(0); box-shadow: none; }
.chef-pill img{
  width: 50px; 
  height: 50px; 
  border-radius: 999px;
  object-fit: cover; backface-visibility: hidden; transform: translateZ(0);
}
.chef-pill span{ 
    font-weight: 500;
    font-size: 1.4rem;
}

/* Optional: reduce accidental text/image selection while dragging */
.chef-reel a,
.chef-reel img{
  -webkit-user-drag: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 580px){
  .chef-reel{
    width: calc(100% + 4rem);
    margin-left: -2rem;
    scrollbar-width: none;
    overflow-x: scroll !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;                 /* lock to horizontal */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;         /* match container padding */
    padding-inline: 1rem;                /* some side breathing room */
    white-space: normal;                 /* let items wrap rules reset */
  }
  .chef-reel::-webkit-scrollbar{ display:none; }

  .reel-track{
    display: flex;                       /* flex row */
    gap: .75rem;
    width: max-content;                  /* grow to content for overflow */
  }

  /* Each pill snaps; show ~1 at a time with a hint of the next */
  .chef-pill{
    scroll-snap-align: center;        /* or 'center' if you prefer centering */
  }
}
/*====================================================
/* ============= E V E N T  S E C T I O N ========== */
/*===================================================*/
#event-section {
    background: var(--tln-red);
}
#community-title, #community-description {
  color: var(--tln-light-grey);
}

#connects-subtitle {
    color: var(--tln-light-grey);
}
#connects-prev, #connects-next {
    color: var(--tln-red);
    background: var(--tln-light-grey);
    border: 2px solid var(--tln-light-grey);
}
#connects-prev:hover, #connects-next:hover {
    color: var(--tln-light-grey);
    background: var(--tln-red);
}
/* Card shell (unchanged) */
#tln-connects-card {
  position: relative;
}

/* Track: horizontal scroll with a gap */
#tln-connects-card .connects-track {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  gap: 2rem;
  padding: 0;
  margin: 0;
  scrollbar-width: thin;
}

/* Each item is a link acting like a card */
#tln-connects-card .connects-track > .video-item {
  flex: 0 0 auto;                 /* width controlled by content/your own CSS */
  position: relative;
  scroll-snap-align: start;       /* optional: aligns on snap */
  border-radius: .5rem;
  overflow: hidden;
  background: black;
}
.more-link {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    font-weight: 500;
    color: var(--tln-red);
    text-align: center;
    text-decoration: none;
    background: radial-gradient(white, #e2e2e2);
    align-items: center;
    justify-content: center;
}
@media  (min-width: 1400px) {
  #tln-connects-card .connects-track > .video-item {
      width: calc(25% - 1.5rem);
  }
}
@media  (max-width: 1399px) {
  #tln-connects-card .connects-track > .video-item {
      width: calc(33% - 1.5rem);
  }
}
@media  (max-width: 968px) {
  #tln-connects-card .connects-track > .video-item {
      width: calc(50% - 1rem);
  }
}
@media  (max-width: 580px) {
  #tln-connects-card .connects-track > .video-item {
      width: 100%;
  }
}

/* Media */
#tln-connects-card .video-thumb {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

#tln-connects-card .video-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;            /* hidden until preview */
  border: 0;
}

/* JS toggles this on hover */
#tln-connects-card .video-item.previewing .video-embed { display: block; }
#tln-connects-card .video-item.previewing .video-thumb { visibility: hidden; }
span.sr-only {
    display: none;
}
/*====================================================
/* ====== N E W S L E T T E R  S E C T I O N ====== */
/*==================================================*/
#newsletter-section{
  position: relative;
  background: radial-gradient(var(--tln-light-grey), var(--tln-white));
}

#newsletter-section .section-content {
  display: flex;
  gap: 2rem;
}

/* ====== Layout ====== */
.newsletter-shell {
    position: relative;
    margin: 0 auto;
    padding: 4rem 2rem;
    width: 100%;
    background: var(--tln-light-grey);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: .5rem;
    box-shadow: 0px 0px 12px -8px black;
}

/* Content card */
.newsletter-card {
    width: 100%;
}
/* Typography */
.newsletter-eyebrow {
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--muted);
    margin-bottom: .5rem;
}
#newsletter-title{
  color: var(--tln-dark-grey);
}
#newsletter-description {
  color: #343a40;
}

.highlights-card {
  position: relative;
  width: 40%;
  min-width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  overflow: hidden;
  text-decoration: none;
}
a.highlights-card:hover {
    scale: 0.98;
}
.highlights-card img {
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
}
#highlights-title {
    position: relative;
    margin: auto !important;
    width: fit-content;
    text-align: center;
    line-height: 5rem;
    font-size: 5rem;
    text-shadow: 1px 2px 4px black;
    text-transform: capitalize;
    color: var(--tln-light-grey);
}

/* Icontact Style Changes */
#ic_signupform .elcontainer {
    background: none !important;
    text-align: left !important;
    max-width: unset !important;
    padding: 0 !important;
    border-radius: unset !important;
    border: none !important;
    font-size: unset !important;
    color: #343a40 !important;
    font-family: Roboto !important;
}
#ic_signupform .form-header {
    background: none !important;
    margin: auto !important;
    padding: 0 !important;
    border-radius: unset !important;
    text-align: left !important;
    font-size: unset !important;
    color: #333b40;
    border-bottom: none !important;
}

.form-header h3 {
    display: none;
}
/* Hide Email label */
.formEl.fieldtype-input.required label {
    display: none !important;
}
#ic_signupform .elcontainer.generous .formEl:not(.hidden-field) {
    padding: 0 !important;
    margin: auto !important;
    right: 0 !important;
}
/* Email filed */
#ic_signupform .elcontainer.generous .formEl:not(.hidden-field) input[type="text"], #ic_signupform .elcontainer.generous .formEl:not(.hidden-field) select {
    height: 2em;
    padding: 0 1em;
}
form#ic_signupform .sortables {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}
.formEl.fieldtype-input.required {
    width: calc(50% - 1rem) !important;
}
#ic_signupform .elcontainer.generous .formEl:not(.hidden-field) input[type="text"], #ic_signupform .elcontainer.generous .formEl:not(.hidden-field) select {
    height: 55px !important;
    padding: 0 1em;
}
#ic_signupform .elcontainer .formEl.fieldtype-input input[type="text"], #ic_signupform .elcontainer .formEl.fieldtype-dropdown select, #ic_signupform .elcontainer .formEl.fieldtype-radio label, #ic_signupform .elcontainer .formEl.fieldtype-checkbox label {
    font-size: 2rem !important;
}


/* Subscribe Section */
.formEl.fieldtype-checkbox.required {
    display: none !important;
}
#ic_signupform .elcontainer .formEl.fieldtype-input label, #ic_signupform .elcontainer .formEl.fieldtype-dropdown label, #ic_signupform .elcontainer .formEl.fieldtype-radio h3, #ic_signupform .elcontainer .formEl.fieldtype-checkbox h3 {
    margin: 0 0 1.25rem 0 !important;
    font-size: 2rem !important;
    font-weight: bold !important;
    color: #353e44 !important;
    text-transform: capitalize !important;
}
#ic_signupform .elcontainer .formEl.fieldtype-radio .option-container, #ic_signupform .elcontainer .formEl.fieldtype-checkbox .option-container {
    padding: 0 !important;
}
#ic_signupform .elcontainer.generous .formEl:not(.hidden-field).fieldtype-radio .option-container label, #ic_signupform .elcontainer.generous .formEl:not(.hidden-field).fieldtype-checkbox .option-container label {
    color: #343d41 !important;
    line-height: unset !important;
}

/* Subscribe Button */
#ic_signupform .elcontainer.generous .submit-container {
  padding: 0 !important;
  width: 300px;
  height: 50px;
}
#ic_signupform .elcontainer .submit-container input[type="submit"] {
    line-height: unset !important;
    font-family: inherit;
    display: block;
    margin: 0 !important;
    padding: 0.8rem !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    text-align: center;
    width: 100% !important;
    height: 100%;
    border: 2px solid var(--tln-light-grey) !important;
    background: var(--tln-red) !important;
    color: var(--tln-light-grey) !important;
    text-decoration: none;
}
#ic_signupform .elcontainer .submit-container input[type="submit"]:hover {
    background: transparent !important;
    color: var(--tln-red) !important;
    border: 2px solid var(--tln-red) !important;
}

.grecaptcha-badge {
    display: none !important;
}

@media  (max-width: 968px) {
  #newsletter-section .section-content {
      flex-direction: column-reverse;
  }
  .highlights-card {
    position: relative;
    width: 100%;
    min-width: unset;
    padding: 4rem 2rem;
  }
  #ic_signupform .elcontainer.generous .submit-container {
    width: 100%;
  }
  .formEl.fieldtype-input.required {
      width: 100% !important;
  }
}
/* ====== Responsive ====== */
@media (max-width: 768px) {
  #highlights-title {
    line-height: 4rem;
    font-size: 4rem;
  }
}
@media (max-width: 580px) {
  #highlights-title {
    line-height: 3rem;
    font-size: 3rem;
  }
  .newsletter-eyebrow {
    text-align: center;
  }
  .newsletter-shell {
    padding: 2rem 1rem 1rem;
  }
  .newsletter-card{
    margin-right:auto;
    margin-left:auto;
  }
  #ic_signupform .elcontainer.generous .formEl:not(.hidden-field) input[type="text"], #ic_signupform .elcontainer.generous .formEl:not(.hidden-field) select {
    height: 50px !important;
    text-align: center !important;
  }
  .formEl.fieldtype-input.required {
    width: 100% !important;
    max-width: 350px;
  }
  #ic_signupform .elcontainer .formEl.fieldtype-input input[type="text"], #ic_signupform .elcontainer .formEl.fieldtype-dropdown select, #ic_signupform .elcontainer .formEl.fieldtype-radio label, #ic_signupform .elcontainer .formEl.fieldtype-checkbox label {
    font-size: 1.6rem !important;
  }
  #ic_signupform .elcontainer.generous .submit-container {
    max-width: 350px;
    margin: auto;
  }
}