/* ============================================================
   nitro-style.css  —  Nitro Pickleball
   Uses #smooth-wrapper as the root scope (not body class)
   so parent Spike theme styles CAN'T interfere

   FIXES:
    1. Section 2: overflow:hidden added so ball doesn't bleed
    2. Section 3 .content: replaced hard-coded px with clamp/vw
    3. Section 4: min-height bumped so abs-positioned images show fully
    4. .w-full: overflow:visible so section4 abs images aren't clipped
    5. #nitro-main: position:relative preserved; overflow:visible for ball
    6. Tablet/mobile breakpoints cleaned up and gaps closed
   ============================================================ */

/* ── Variables ── */
:root {
  --nc-accent  : #a6c634;
  --nc-purple  : #38315e;
  --nc-purple2 : #2c2a4a;
  --nc-footer  : #2a2740;
  --nc-muted   : #b9b7c9;
  --nc-hfont   : "Outfit", sans-serif;
  --nc-bfont   : "DM Sans", sans-serif;
}

/* Mobile only p - hide on desktop by default */
.mobile-only-text {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only-text {
    display: block;
  }
}

/* Desktop only p - hide on mobile */
@media (max-width: 768px) {
  .desktop-only-text {
    display: none;
  }
}

/* ── Kill parent theme on nitro page ──────────────────────────
   Hide Spike's own header, nav, footer, sidebars etc.          */
body.nitro-page {
  background      : #000 !important;
  color           : #fff !important;
  font-family     : var(--nc-bfont) !important;
  font-size       : 18px !important;
  line-height     : 1.5 !important;
  margin          : 0 !important;
  padding         : 0 !important;
  overflow-x      : hidden !important;
}

body.nitro-page .site-header,
body.nitro-page #masthead,
body.nitro-page .site-branding,
body.nitro-page #site-navigation,
body.nitro-page .main-navigation,
body.nitro-page .site-footer,
body.nitro-page #colophon,
body.nitro-page .sidebar,
body.nitro-page #secondary,
body.nitro-page .wp-site-blocks > *:not(.nitro-header):not(#smooth-wrapper),
body.nitro-page > *:not(.nitro-header):not(#smooth-wrapper):not(script):not(style) {
  display: none !important;
}

body.nitro-page *,
body.nitro-page *::before,
body.nitro-page *::after {
  box-sizing: border-box;
}

body.nitro-page a { text-decoration: none; }
html { scroll-behavior: smooth; }


/* ── Utility ── */
/*
  FIX: overflow:visible so absolutely-positioned children in
  section4 are not clipped.  Max-width/margin still center it.
*/
.w-full {
  width     : calc(100vw - 10rem);
  max-width : 1440px;
  margin    : auto;
  overflow  : visible;
}

.radius { border-radius: 10px; }

.heading {
  font-family    : var(--nc-hfont);
  font-weight    : 700;
  font-size      : 3.5vw;
  color          : var(--nc-accent);
  text-transform : uppercase;
  line-height    : 1.2;
  margin-bottom  : 1.4rem;
}


/* ============================================================
   HEADER
   ============================================================ */
.nitro-header {
  background : transparent;
  padding    : 20px 60px;
  position   : fixed;
  width      : 100%;
  top        : 0;
  left       : 0;
  z-index    : 9999;
}

.nav-container {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
}

.nitro-header .logo img { height: 90px; width: auto; }

/* Nav */
.nitro-nav { display: flex; gap: 40px; }

.nitro-nav ul.nitro-menu {
  display     : flex;
  gap         : 40px;
  list-style  : none;
  margin      : 0;
  padding     : 0;
}

.nitro-nav a,
.nitro-nav ul.nitro-menu li a {
  color           : #cfcfcf;
  font-weight     : 600;
  font-size       : 16px;
  position        : relative;
  display         : inline-block;
  text-decoration : none;
  transition      : color .2s;
}

.nitro-nav a:hover,
.nitro-nav ul.nitro-menu li a:hover,
.nitro-nav a.active,
.nitro-nav ul.nitro-menu li.current-menu-item > a { color: #fff; }

.nitro-nav a.active::after,
.nitro-nav ul.nitro-menu li.current-menu-item > a::after {
  content    : "";
  position   : absolute;
  left       : 0;
  bottom     : -6px;
  width      : 100%;
  height     : 2px;
  background : #fff;
}

.header-cta-btn {
  background      : var(--nc-purple);
  color           : #fff;
  padding         : 12px 28px;
  border-radius   : 30px;
  font-weight     : 600;
  text-decoration : none;
  white-space     : nowrap;
  transition      : background .3s;
}
.header-cta-btn:hover { background: var(--nc-purple2); color: #fff; }


/* ============================================================
   HERO BALL + SECTION 1
   ============================================================ */
/*
  FIX: overflow:visible (was overflow:hidden) so the ball
  can travel across sections during scroll.
*/
#nitro-main {
  overflow : visible;
  position : relative;
}

#headphone {
  position          : absolute;
  left              : 50%;
  transform         : translateX(-50%);
  top               : 2.2%;
  width             : 40vw;
  max-width         : 660px;
  filter            : drop-shadow(8px 35px 6px #00000025);
  will-change       : transform, width;
  z-index           : 9;
  pointer-events    : none;  /* FIX: prevents ball blocking click targets */
}

#section1 {
  height          : 100vh;
  width           : 60vw;
  margin          : auto;
  display         : flex;
  align-items     : center;
  justify-content : center;
  text-align      : center;
  position        : relative;
  z-index         : 2;
}
#section1 h1 { font-size: 11.5vw; line-height: 0.85; }


/* ============================================================
   SECTION 2
   ============================================================ */
#section2 {
  min-height : 100vh;
  padding-top: 4vw;
  position   : relative;  /* FIX: stacking context for z-index */
  z-index    : 2;
}
#section2 .content-wrapper {
  max-width : 500px;
  position  : relative;
  z-index   : 2;
}
#section2 p { color: #fff; }

.nitro-btn {
  display         : inline-block;
  margin-top      : 1.8rem;
  background      : var(--nc-purple);
  color           : #fff;
  padding         : 10px 22px;
  border-radius   : 10px;
  font-weight     : 500;
  text-decoration : none;
  transition      : background .3s;
}
.nitro-btn:hover { background: var(--nc-purple2); color: #fff; }

.feature-wrapper {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 1.8rem;
  margin-top            : 8vw;
  position              : relative;
  z-index               : 2;
}

.feature-box {
  border  : 2px solid #fff;
  padding : 1.2vw 1.4vw;
  color   : #fff;
}

.feature-name {
  font-family   : var(--nc-hfont);
  text-transform: uppercase;
  font-size     : 1.4rem;
  line-height   : 1.2;
  margin-bottom : .5rem;
  color         : #fff;
}
.feature-detail { color: rgba(255,255,255,.8); }


/* ── Feature Icon ── */
.feature-icon {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 52px;
  height          : 52px;
  border-radius   : 50%;
  background      : rgba(255,255,255,.08);
  border          : 1.5px solid rgba(255,255,255,.15);
  margin-bottom   : 16px;
  transition      : background .3s ease, border-color .3s ease;
}

.feature-icon i {
  font-size  : 22px;
  color      : #fff;
  transition : color .3s ease, transform .3s ease;
}

.feature-box:hover .feature-icon {
  background   : rgba(255,255,255,.18);
  border-color : rgba(255,255,255,.4);
}

.feature-box:hover .feature-icon i {
  color     : #e8ff47;
  transform : scale(1.15) rotate(-8deg);
}


/* ============================================================
   SECTION 3
   ============================================================ */
#section3 {
  min-height : 100vh;
  padding    : 4vw 0;
  position   : relative;
  z-index    : 2;
}

#section3 .heading {
  font-size     : clamp(2rem, 12.5vw, 13.5rem);
  text-align    : center;
  margin-bottom : 3vw;
}

#section3 .content-wrapper {
  display     : flex;
  gap         : 3vw;
  align-items : flex-start;
}

#section3 video {
  width      : 100%;
  max-width  : 500px;
  box-shadow : 0 0 30px #73442536;
  flex-shrink: 0;
}

/*
  FIX: replaced hard-coded padding-left:200px / margin-top:-80px
  with responsive clamp values. The negative margin caused
  layout bleed on smaller viewports.
*/
#section3 .content {
  flex         : 1;
  padding-left :300px;
  margin-top   : clamp(0px, -2vw, 0px);
  align-self   : center;
}

#section3 p { margin-top: 1rem; color: rgba(255,255,255,.85); }


/* ============================================================
   SECTION 4  —  Gallery (absolute positioned images)
   ============================================================ */
/*
  FIX: min-height increased from 100vh to 130vh so the bottom
  absolute image (img3 at bottom:12%) is fully visible without
  clipping into the next section.
*/
#section4 {
  min-height : 130vh;
  position   : relative;
  z-index    : 2;
}

/* .gal-img — specifically for gallery images, keeps section5 product images safe */
#section4 .gal-img {
  border     : 10px solid #fff;
  box-shadow : 0 0 30px #73442536;
  position   : absolute;
  width      : auto;
}

#section4 .img1 { max-width: 260px; top:   8%;   left:  3%;   transform: rotate(15deg);  }
#section4 .img2 { max-width: 470px; top:  18%;   right: 4%;   transform: rotate(14deg);  }
/* img3: bottom-based so it always sits near section floor regardless of height */
#section4 .img3 { max-width: 340px; bottom: 8%;  left: 10%;   transform: rotate(-12deg); }


/* ============================================================
   SECTION 5  —  Products
   ============================================================ */
#section5 {
  text-align : center;
  padding    : 4vw 0 8vw;
  min-height : 94vh;
  position   : relative;
  z-index    : 2;
}

#section5 .product-section {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  margin-top            : 3rem;
}

/* .product-img — only product images, NOT gallery images */
.product-img {
  width      : 100%      !important;
  max-width  : 300px     !important;
  height     : auto      !important;
  margin-bottom: 1.5rem  !important;
  filter     : drop-shadow(6px 15px 5px #00000018) !important;
  position   : static    !important;
  border     : none      !important;
  box-shadow : none      !important;
  transform  : none      !important;
}

.product {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : flex-end;
}
.product .name  { font-size: 24px; font-weight: 500; color: #fff; }
.product .price { font-size: 24px; font-weight: 700; color: #fff; }


/* ============================================================
   SEASON
   ============================================================ */
.season {
  display  : flex;
  background: #000;
  color    : #fff;
  padding  : 90px 60px 170px;
  position : relative;
}

.season-left  { width: 50%; }
.season-right { width: 50%; position: relative; }

.mini { font-size: 12px; color: #aaa; letter-spacing: 2px; margin-bottom: 20px; }
.season-left h2 { font-size: 48px; font-weight: 700; margin-bottom: 20px; color: #fff; }
.sub  { font-size: 16px; margin-bottom: 20px; color: #fff; }
.desc { color: #bbb; line-height: 1.7; max-width: 500px; margin-bottom: 30px; }

.actions { display: flex; align-items: center; gap: 20px; }

.about-btn {
  background      : var(--nc-accent);
  padding         : 12px 28px;
  border-radius   : 30px;
  color           : #000;
  font-weight     : 600;
  text-decoration : none;
  transition      : opacity .3s;
}
.about-btn:hover { opacity: .85; color: #000; }

.phone-wrap { display: flex; align-items: center; gap: 10px; color: #ddd; }

/* Season images */
.season-img { border: none; box-shadow: none; position: absolute; width: auto; }
.img-top    { width: 450px; top: 0;     right: 260px; z-index: 2; border-radius: 10px; }
.img-bottom { width: 360px; top: 160px; right: 0;     z-index: 1; border-radius: 10px; }


/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section {
  position : relative;
  width    : 100%;
  height   : 100vh;
  overflow : hidden;
}

.bg-video {
  position  : absolute;
  top       : 50%;
  left      : 50%;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transform : translate(-50%, -50%);
  z-index   : 1;
}

.video-overlay {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(to right, rgba(0,0,0,.7), rgba(0,0,0,.2));
  z-index    : 2;
}


/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  overflow      : hidden;
  background    : #000;
  padding       : 20px 0;
  border-top    : 1px solid #111;
  border-bottom : 1px solid #111;
}

.marquee-track {
  display     : flex;
  align-items : center;
  gap         : 30px;
  white-space : nowrap;
  animation   : nitroScroll 15s linear infinite;
}

.marquee-track span { font-size: 28px; font-weight: 600; color: #fff; letter-spacing: 1px; }

@keyframes nitroScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/*
  SAFETY NET: Sponsor cards must always be visible.
  If GSAP sets opacity:0 via a stuck animation, this
  ensures cards are never permanently hidden.
  The !important overrides any inline GSAP style.
*/
.sponsor-card,
.sponsor-img {
  opacity    : 1 !important;
  visibility : visible !important;
}

/* ============================================================
   SPONSORS GRID
   ============================================================ */
.nitro-container {
  width   : 90%;
  margin  : 40px auto;
  padding : 60px 80px;
}

.sponsor-grid {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  grid-template-rows    : repeat(2, 220px);
  border                : 2px solid #000;
}

.sponsor-card {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : #f3f3f3;
  border          : 1px solid #000;
  position        : relative;
  overflow        : hidden;
  transition      : all .3s;
}

.sponsor-img {
  max-width    : 70%;
  max-height   : 70%;
  width        : auto;
  height       : auto;
  object-fit   : contain;
  position     : static;
  border       : none;
  box-shadow   : none;
  transform    : none;
  transition   : transform .4s;
}

.sponsor-card:hover {
  background : #fff;
  transform  : scale(1.03);
  box-shadow : 0 10px 25px rgba(0,0,0,.15);
  z-index    : 2;
}

.sponsor-card:hover .sponsor-img {
  transform: translateY(-5px) scale(1.05);
}

.sponsor-card::before {
  content    : "";
  position   : absolute;
  width      : 120%;
  height     : 100%;
  top        : 0;
  left       : -120%;
  background : linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transition : .5s;
}
.sponsor-card:hover::before { left: 120%; }


/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-hero {
  position   : relative;
  background : #e8ddd0 center/cover no-repeat;
  padding    : 80px;
  overflow   : hidden;
}

.cta-inner {
  position        : relative;
  z-index         : 2;
  display         : flex;
  justify-content : space-between;
  align-items     : center;
}

.cta-text h1 { font-size: 48px; font-weight: 700; color: #000; line-height: 1.2; }
.cta-text span { display: block; margin-top: 10px; color: #000; }

.contact-btn {
  background      : var(--nc-purple);
  color           : #fff;
  padding         : 18px 36px;
  border-radius   : 40px;
  font-weight     : 600;
  letter-spacing  : 1px;
  text-decoration : none;
  transition      : background .3s;
  white-space     : nowrap;
}
.contact-btn:hover { background: var(--nc-purple2); color: #fff; }


/* ============================================================
   FOOTER
   ============================================================ */
.nitro-footer {
  background : var(--nc-footer);
  color      : var(--nc-muted);
  padding    : 60px;
  position   : relative;
}

.footer-grid {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  gap                   : 60px;
}

.fcol h3 { color: #fff; margin-bottom: 20px; font-size: 18px; }
.fcol p  { margin-bottom: 12px; font-size: 15px; color: var(--nc-muted); }
.f-phone { font-weight: bold; color: #fff !important; }
.f-email a { color: var(--nc-muted); text-decoration: underline; }
.f-email a:hover { color: #fff; }

ul.nitro-footer-links { list-style: none; padding: 0; margin: 0; }
ul.nitro-footer-links li { margin-bottom: 10px; }
ul.nitro-footer-links li a { color: var(--nc-muted); text-decoration: none; transition: color .3s; }
ul.nitro-footer-links li a:hover { color: #fff; }

.socials { display: flex; gap: 15px; margin-top: 10px; }
.socials a {
  width           : 45px;
  height          : 45px;
  border          : 1px solid #4a4763;
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  text-decoration : none;
  transition      : background .3s;
}
.socials a:hover { background: #3c3a63; }

.f-divider { height: 1px; background: #3a3755; margin: 50px 0 20px; }
.f-bottom p { font-size: 14px; color: var(--nc-muted); }

.scroll-top {
  position        : absolute;
  right           : 30px;
  bottom          : 20px;
  width           : 55px;
  height          : 55px;
  background      : #e6e6e6;
  color           : #000;
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 20px;
  text-decoration : none;
  transition      : background .3s;
}
.scroll-top:hover { background: #fff; }


/* ============================================================
   RESPONSIVE — TABLET (≤ 991px)
   ============================================================ */
@media (max-width: 991px) {
  .w-full     { width: 90%; }
  .heading    { font-size: 6vw; }

  #section1          { width: 90%; }
  #section1 h1       { font-size: 12vw !important; }
  #headphone         { width: 60vw; top: 5%; }

  .feature-wrapper   { grid-template-columns: 1fr 1fr; }

  #section3 .content-wrapper { flex-direction: column; gap: 20px; }
  #section3 video             { max-width: 100%; }
  #section3 .content          { padding-left: 0; margin-top: 20px; }

  /* Gallery: switch to static on tablet */
  #section4           { min-height: auto; padding: 60px 0 40px; }
  #section4 .gal-img  {
    position  : static;
    display   : block;
    width     : 90%;
    max-width : 100%;
    margin    : 20px auto;
    transform : none;
  }

  #section5 .product-section {
    grid-template-columns: 1fr 1fr;
  }

  .season             { flex-direction: column; padding: 60px 30px; }
  .season-left,
  .season-right       { width: 100%; }
  .season-img.img-top,
  .season-img.img-bottom {
    position      : static;
    width         : 100%;
    margin-top    : 20px;
    border-radius : 10px;
  }
  .season-left h2     { font-size: 30px; }

  .footer-grid        { grid-template-columns: 1fr 1fr; }
  .sponsor-grid       { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .sponsor-card       { height: 180px; }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  .nitro-header        { padding: 14px 20px; }
  .nitro-nav           { display: none; }
  .nitro-header .logo img { height: 60px; }

  .heading             { font-size: 7vw; }

  #section1            { width: 100%; padding: 0 20px; }
  #section1 h1         { font-size: 14vw !important; }
  #headphone           { width: 80vw; }

  .feature-wrapper     { grid-template-columns: 1fr; }
  .feature-box         { padding: 20px; }

  #section5 .product-section { grid-template-columns: 1fr; }
  .product .name       { font-size: 23px; }
  .product .price      { font-size: 20px; }

  .sponsor-grid        { grid-template-columns: 1fr 1fr; }

  .cta-inner           { flex-direction: column; gap: 20px; text-align: center; }
  .cta-text h1         { font-size: 26px; }

  .footer-grid         { grid-template-columns: 1fr; }
  .nitro-footer        { padding: 40px 20px; }

  .video-section       { height: 60vh; }
  .nitro-container     { width: 100%; padding: 10px; }
  .cta-hero            { padding: 40px 20px; }
}

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











/* ── Instagram Feed Section ── */
.instagram-section {
  width: 100%;
  /*background: #000;*/
  padding: 60px 40px;
  text-align: center;
}

.instagram-section h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  color: #fff!important;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.insta-feed-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* Override Smash Balloon plugin's default purple/violet bg */
.instagram-section .sbi_header_img_follow_btn,
.instagram-section #sb_instagram,
.instagram-section .sbi_follow_btn a,
#sb_instagram {
  background: transparent !important;
}

.sbi_follow_btn a {
  /*background: #a6c634 !important;*/
  color: #000 !important;
  border-radius: 40px !important;
  font-family: 'DM Sans', sans-serif !important;
}


/*#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3, .sb_instagram_header.sbi_medium .sbi_header_text h3 {*/
/*        font-size: 20px;*/
/*        color: #fff !important;*/
/*    }*/
/*#sb_instagram .sb_instagram_header p, .sb_instagram_header p {*/
/*    font-size: 13px;*/
/*    line-height: 1.3;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    color: #fff;*/
/*}*/

#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a, .et-db #et-boc .et-l .et_pb_module .sbi_follow_btn a {
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    padding: 7px 14px;
    margin: 5px auto 0;
    background: #333;
    text-decoration: none;
    line-height: 1.5;
    background-color: #38315e !important;
    color: #fff !important;
}
#sb_instagram .sbi_follow_btn a:hover, #sb_instagram .sbi_follow_btn a:focus {
    outline: none;
    box-shadow: inset 0 0 10px 20px #FFFFFF;
    color: #000 !important;
}













/* ================================
   Section Layout
================================ */
.farms-section {
  width: 100%;
  max-width: 1500px;
  padding: 20px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* ================================
   Header
================================ */
.farms-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.farms-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--title-color);
  letter-spacing: 0.02em;
}

.farms-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--subtitle-color);
  font-weight: 400;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ================================
   Carousel Wrapper
================================ */
.carousel-wrapper {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.carousel-track-container {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.carousel-track {
  display: flex;
  gap: 18px;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
  padding: 8px 4px 12px;
}

/* ================================
   Reel Cards
================================ */
.reel-card {
  flex: 0 0 calc((100% - 4 * 18px) / 5);
  min-width: 200px;
  max-width: 340px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  position: relative;
  aspect-ratio: 9 / 16;
  background: #1a1a1a;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.28s ease;
}

.reel-card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 18px 48px rgba(0,0,0,0.22);
}

.reel-card:hover .reel-media::after {
  opacity: 1;
}

/* ================================
   Reel Media (video + fallback)
================================ */
.reel-media {
  position: relative;
  width: 100%;
  height: 100%;
}

.reel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: var(--card-radius);
  pointer-events: none;
}

.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: var(--card-radius);
  display: none; /* shown via JS if src present */
}

.reel-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: var(--card-radius);
  display: block;
}

/* Video visible override */
.reel-card.has-video .reel-video {
  display: block;
}
.reel-card.has-video .reel-fallback {
  display: none;
}

/* ================================
   Reel Icon (top-right)
================================ */
.reel-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  opacity: 0.85;
  line-height: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

/* ================================
   Reel Captions
================================ */
.reel-caption {
  position: absolute;
  bottom: 16px;
  left: 14px;
  z-index: 10;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

.reel-caption-overlay {
  position: absolute;
  bottom: 20px;
  left: 14px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

.caption-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  font-weight: 700;
  color: white;
}

.caption-highlight {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.8vw, 1rem);
  font-weight: 900;
  color: var(--caption-highlight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.caption-bold {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.caption-bold-white {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-weight: 700;
  color: white;
}

/* ================================
   Carousel Buttons
================================ */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--carousel-btn-bg);
  box-shadow: var(--carousel-btn-shadow);
  font-size: 1.7rem;
  line-height: 1;
  color: #2a2a2a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

.carousel-btn:hover {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transform: translateY(-50%) scale(1.08);
}

.carousel-btn:active {
  transform: translateY(-50%) scale(0.96);
}

.prev-btn {
  left: -22px;
}

.next-btn {
  right: -22px;
}

.carousel-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ================================
   CTA Button
================================ */
.farms-cta {
  display: flex;
  justify-content: center;
  margin-top: 4px;
  background-color: #38315e;
  border-radius: 15px;
}

.visit-btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-color);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 16px 48px;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease,
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}

.visit-btn:hover {
  background: var(--btn-hover);
  border-color: #b89c30;
  transform: translateY(-2px) scale(1.03);
}

.visit-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ================================
   Responsive
================================ */
@media (max-width: 1100px) {
  .reel-card {
    flex: 0 0 calc((100% - 3 * 18px) / 4);
  }
}

@media (max-width: 820px) {
  .reel-card {
    flex: 0 0 calc((100% - 2 * 18px) / 3);
  }

  .prev-btn { left: -14px; }
  .next-btn { right: -14px; }
}

@media (max-width: 560px) {
  .reel-card {
    flex: 0 0 calc((100% - 1 * 18px) / 2);
  }

  .carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }

  .prev-btn { left: -10px; }
  .next-btn { right: -10px; }

  .visit-btn {
    padding: 14px 36px;
    font-size: 0.95rem;
  }
}

@media (max-width: 360px) {
  .reel-card {
    flex: 0 0 85%;
  }
}