/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Barlow:wght@400;600;700&display=swap');

/*
 Theme Name: Stay Connected Child
 Template: generatepress
 Version: 1.0
*/

:root{
  --sc-headline: "Oswald", system-ui, sans-serif;
  --sc-sans: "Barlow", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Base safe defaults ---------- */
.entry-content > *:first-child { margin-top: 0 !important; }
.wp-block-separator{ opacity:.5; margin:22px auto; width:96%; }

/* Keep media stable */
.wp-block-cover, .sc-hero{
  background-position:center center; background-size:cover;
}
.wp-block-cover img, .wp-block-cover video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* ---------- Header / Navigation ---------- */
.site-header,
.site-header .inside-header,
.main-navigation,
.main-navigation .inside-navigation{
  background: linear-gradient(90deg, #0b2239 0%, #009fb7 60%, #ffb703 100%) !important;
  color:#fff !important;
}
.site-header .inside-header{ padding:4px 12px !important; display:flex; align-items:center; gap:12px; }
.site-branding img{ max-height:42px !important; width:auto !important; }
@media (max-width:782px){ .site-branding img{ max-height:36px !important; } }

.main-navigation .main-nav > ul{ display:flex !important; gap:10px !important; }
.main-navigation .main-nav > ul > li{ margin:0 !important; }
.main-navigation .main-nav ul li > a{
  padding:8px 10px !important; color:#fff !important; background:transparent !important; box-shadow:none !important;
  font-weight:600;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a{
  text-decoration:underline; text-underline-offset:4px; background:transparent !important;
}
.main-navigation ul ul{ background:rgba(11,34,57,.96) !important; border-radius:8px; padding:8px 0; }
.main-navigation ul ul li a{ color:#fff !important; padding:10px 16px; }
.main-navigation ul ul li a:hover{ background:#ffb703 !important; color:#0b2239 !important; }
.main-navigation.toggled .main-nav > ul{
  background:rgba(0,0,0,.25) !important; backdrop-filter:blur(4px);
  border-radius:12px; margin:8px 12px; padding:8px 6px;
}

/* ---------- Buttons (CTAs / View All) ---------- */
.y-btn, .y-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:12px 18px; border-radius:999px;
  font:800 14px/1 var(--sc-sans); letter-spacing:.04em;
  color:#0b2239 !important; text-decoration:none !important; text-shadow:none !important;
  background:linear-gradient(180deg,#ffbf35 0%, #ffb703 100%);
  border:2px solid #ffb703; box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.y-btn:hover, .y-cta:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 12px 28px rgba(0,0,0,.28); }
.y-btn + .y-btn{ margin-left:10px; } /* “Shop Now” + “Contact Us” side-by-side */

/* ---------- HOME rows / cards ---------- */
.y-wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* Desktop grid (theme controls desktop; JS turns mobile into scroller) */
.y-row{ display:grid; grid-template-columns:1fr; gap:16px; margin:0 0 28px; }
@media (min-width:640px){ .y-row{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .y-row{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1280px){ .y-row{ grid-template-columns:repeat(4,1fr); } }

.y-card{ display:block; background:#0f141a; color:#e5e7eb; border:1px solid #ffffff1a;
  border-radius:14px; overflow:hidden; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .18s, box-shadow .18s, border-color .18s; }
.y-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28); border-color:#ffffff33; }
.y-card img{ display:block; width:100%; height:200px; object-fit:cover; background:#0b0f13; }
@media (min-width:768px){ .y-card img{ height:220px; } }
.y-meta{ display:inline-block; font:600 11px/1 var(--sc-sans); letter-spacing:.06em; color:#fbbf24; margin:2px 0 8px; }
.y-title{ font:800 18px/1.25 var(--sc-sans); color:#fff; margin:0 0 8px; }
.excerpt{ font:13px/1.6 var(--sc-sans); color:#9ca3af; }

/* Mobile swipe shell (JS sets exact widths; CSS provides snap + hides scrollbars) */
@media (max-width:782px){
  .y-hscroll .y-row{
    display:flex !important; overflow-x:auto !important; gap:0 !important;
    padding:0 12px 10px !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .y-hscroll .y-row::-webkit-scrollbar{ display:none; }

  html, body, .site, .inside-article, main{ overflow-x:hidden !important; }
  .y-card img{ width:100% !important; height:auto !important; }
}

/* ---------- “Get Prepped” banner / hero ---------- */
.y-hero{
  position:relative; background-position:center; background-size:cover; background-repeat:no-repeat;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:50px 20px; border-top:1px solid #ffffff12; border-bottom:1px solid #ffffff0f;
}
.y-hero::after{
  content:""; position:absolute; inset:0;
  /* bright background with readable text */
  background: linear-gradient(180deg, rgba(16,18,23,.15), rgba(16,18,23,.35));
  z-index:1; pointer-events:none;
}
.y-hero .y-wrap{ position:relative; z-index:2; }
.y-hero h2{
  font-family:var(--sc-headline); font-weight:700; color:#fff;
  -webkit-text-stroke:.6px rgba(0,0,0,.35); text-shadow:0 2px 12px rgba(0,0,0,.55);
  margin:0 0 10px;
}
.y-hero .y-hero-line{
  font-family:var(--sc-sans); font-weight:600; color:#f1f5f9;
  -webkit-text-stroke:.4px rgba(0,0,0,.25); text-shadow:0 2px 10px rgba(0,0,0,.45);
  margin:0 0 18px; max-width:48ch;
}

/* ---------- Reports / Tides & Cams grid ---------- */
.yg-wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.yg-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .yg-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .yg-grid{ grid-template-columns:repeat(4,1fr); } }

.yg-card{ display:block; color:#e5e7eb; text-decoration:none; background:#0f141a; border:1px solid #ffffff1a;
  border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .15s, box-shadow .15s, border-color .15s; }
.yg-card:hover{ transform:translateY(-2px); border-color:#ffffff33; box-shadow:0 10px 24px rgba(0,0,0,.28); }
.yg-img{ aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#0b0f13; }
.yg-body{ padding:12px 14px 14px; }
.yg-date{ font:700 11px/1.1 var(--sc-sans); letter-spacing:.06em; text-transform:uppercase; color:#fbbf24; margin:2px 0 8px; }
.yg-title{ font:800 18px/1.25 var(--sc-sans); color:#fff; margin:0 0 8px; }
.yg-excerpt{ font:13px/1.55 var(--sc-sans); color:#9ca3af; }

.yg-pager{ display:flex; gap:8px; justify-content:center; margin:18px 0 8px; flex-wrap:wrap; }
.yg-pager a, .yg-pager span{
  display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid #ffffff22;
  color:#e5e7eb; text-decoration:none; font:600 13px/1 var(--sc-sans);
}
.yg-pager .current{ background:#ffb703; color:#0b2239; border-color:#ffb703; }

/* ---------- Footer ---------- */
.site-footer,
.site-footer .inside-site-info,
.site-footer .site-info{
  background: linear-gradient(90deg, #0b2239 0%, #009fb7 60%, #ffb703 100%) !important;
  color:#fff !important;
}
.site-footer .inside-site-info{ padding:10px 16px !important; }
.site-footer .site-info{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-size:14px;
}
.site-footer .site-info a{ color:#fff !important; font-weight:600; text-decoration:none; }
.site-footer .site-info a:hover{ color:#ffb703 !important; text-decoration:underline; }

/* End of file */
/* =========================
 * [sc_tides_hub] — Category tiles (Tides & Cams hub)
 * ========================= */
add_shortcode('sc_tides_hub', function () {
  ob_start(); ?>
  <section class="sc-tiles-hub">
    <div class="hub-wrap">
      <h2 class="hub-heading">Tides &amp; Cams Hub</h2>

      <div class="hub-grid">
        <!-- Fort Myers Beach & Fort Myers -->
        <a class="hub-tile"
           href="/fort-myers-beach-and-fort-myers/"
           style="--bg:url(https://stayconnectedflorida.com/wp-content/uploads/2025/09/uiepgirlupa.jpg);">
          <span class="hub-label">Fort Myers Beach &amp; Fort Myers</span>
        </a>

        <!-- Sanibel, Captiva & Cayo Costa -->
        <a class="hub-tile"
           href="/sanibel-captiva-cayo-costa/"
           style="--bg:url(https://stayconnectedflorida.com/wp-content/uploads/2025/09/tc9caeskmpc.jpg);">
          <span class="hub-label">Sanibel, Captiva &amp; Cayo Costa</span>
        </a>

        <!-- Pine Island & Charlotte Harbor -->
        <a class="hub-tile"
           href="/pine-island-charlotte-harbor/"
           style="--bg:url(https://stayconnectedflorida.com/wp-content/uploads/2025/09/dbgpflystkk.jpg);">
          <span class="hub-label">Pine Island &amp; Charlotte Harbor</span>
        </a>

        <!-- Naples & Bonita -->
        <a class="hub-tile"
           href="/naples-bonita/"
           style="--bg:url(https://stayconnectedflorida.com/wp-content/uploads/2025/09/9_tixe9c-hc.jpg);">
          <span class="hub-label">Naples &amp; Bonita</span>
        </a>

        <!-- Marco, Everglades City & Chokoloskee -->
        <a class="hub-tile"
           href="/marco-everglades-city-chokoloskee/"
           style="--bg:url(https://stayconnectedflorida.com/wp-content/uploads/2025/09/h9tfe4unjc8.jpg);">
          <span class="hub-label">Marco, Everglades City &amp; Chokoloskee</span>
        </a>
      </div>
    </div>

    <style>
      .sc-tiles-hub .hub-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
      .sc-tiles-hub .hub-heading{margin:10px 0 16px;font:700 24px/1.2 Oswald,system-ui,sans-serif;color:#0b2239}
      .sc-tiles-hub .hub-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
      @media (max-width:782px){.sc-tiles-hub .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
      .sc-tiles-hub .hub-tile{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#0f141a;box-shadow:0 6px 18px rgba(0,0,0,.22);text-decoration:none;transition:transform .16s, box-shadow .16s, filter .16s}
      .sc-tiles-hub .hub-tile::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;transform:scale(1.02)}
      .sc-tiles-hub .hub-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,18,.10) 0%,rgba(6,12,18,.65) 70%,rgba(6,12,18,.85) 100%)}
      .sc-tiles-hub .hub-label{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;font:700 18px/1.25 Oswald,system-ui,sans-serif;text-shadow:0 2px 10px rgba(0,0,0,.45);letter-spacing:.01em}
      .sc-tiles-hub .hub-tile:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.28);filter:brightness(1.03)}
    </style>
  </section>
  <?php
  return ob_get_clean();
});
/* ========== GLOBAL BRAND GRADIENT (header + footer) ========== */
:root{
  --sc-grad: linear-gradient(90deg,
    #35d0e2 0%,
    #18b4c0 28%,
    #2fb3ff 60%,
    #ffb703 100%
  );
}

/* HEADER STRIP (desktop + mobile) */
.site-header,
.inside-header,
.main-navigation,
.main-navigation.is_stuck {
  background: var(--sc-grad) !important;
  color: #fff !important;
}

/* Remove the small “box” around menu row and menu items */
.inside-header,
.main-navigation .inside-navigation,
.main-navigation .main-nav,
.main-navigation .main-nav > ul,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-items .search-item,
.main-navigation .main-nav .menu > li > a {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Menu item text color + hover/focus */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items a {
  color: #ffffff !important;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
  color: #ffffff !important;
  text-decoration: underline;       /* accessible cue, no background box */
  text-underline-offset: 2px;
}

/* Submenus: keep readable without gradient boxes */
.main-navigation .main-nav ul ul {
  background: rgba(6,12,18,.92) !important;  /* dark plate under dropdowns only */
  border: 0 !important;
}
.main-navigation .main-nav ul ul li a { color:#fff !important; }

/* MOBILE NAV drawer (if your theme uses an off-canvas panel) */
.slideout-navigation,
#mobile-menu,
#generate-slideout-menu,
.toggled .main-nav > ul {
  background: rgba(6,12,18,.95) !important;
  border: 0 !important;
}

/* ========== FOOTER STRIP ========== */
.site-footer,
.footer-widgets,
.site-info {
  background: var(--sc-grad) !important;   /* one continuous gradient */
  color: #ffffff !important;
}

/* Remove any inner “card”/box around the copyright line */
.footer-widgets .inside-footer-widgets,
.site-info .inside-site-info,
.footer-bar,
.footer-bar .inside-footer-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Footer links = white; hover = underline (no boxes) */
.site-info a,
.footer-widgets a,
.site-footer a { color:#ffffff !important; }
.site-info a:hover,
.footer-widgets a:hover,
.site-footer a:hover { text-decoration: underline; }

/* Optional: tighten footer padding slightly on mobile for a cleaner strip */
@media (max-width: 782px){
  .site-info, .footer-widgets { padding-top:14px; padding-bottom:14px; }
}
/* Remove ghost heading/label behind View All buttons */
.y-wrap > p,
.y-wrap > p:empty,
.y-wrap > p:has(> .y-btn) {
  color: transparent !important;
  text-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/***********************
  1) HEADER & NAV GRADIENT (lighter on the left)
***********************/
.site-header,
.site-header .inside-header {
  /* one smooth bar, left→right; tune the first color to be lighter if desired */
  background: linear-gradient(90deg, #1aa0c7 0%, #27c2b1 45%, #ffb703 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove the small “second bar” behind menu items */
.main-navigation,
.main-navigation .inside-navigation,
.nav-align-center .inside-navigation,
.secondary-navigation { 
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Menu items: no grey/box backgrounds on normal/hover/current */
.main-navigation .main-nav > ul > li > a,
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
  background: transparent !important;
  box-shadow: none !important;
}

/* Mobile hamburger row uses the same single gradient, remove inner strip */
@media (max-width: 782px){
  .has-inline-mobile-toggle .inside-navigation,
  .menu-toggle { background: transparent !important; box-shadow: none !important; }
}

/***********************
  2) FOOTER: single gradient bar + white text
***********************/
.site-footer,
.site-footer .inside-site-info {
  background: linear-gradient(90deg, #1aa0c7 0%, #27c2b1 45%, #ffb703 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.site-info, .site-info a { color: #fff !important; }
.site-footer .widget, .site-footer .footer-widgets { background: transparent !important; }

/* Remove any extra capsule/box around the copyright line */
.site-footer .inside-site-info,
.site-info { padding: 12px 16px; }
.site-footer .inside-site-info > * {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/***********************
  3) “Ghost text” behind View All (nuke safely)
***********************/
/* Common GP/GB headings that can linger as labels */
.home h2, .home h3, .home .gb-headline, .home .section-title {
  /* only when they sit immediately before a button row */
}
.y-wrap > p,
.y-hscroll ~ p,            /* stray paragraph after rows */
.y-row ~ p,                /* stray paragraph after grid */
.y-wrap > p:empty {
  position: relative;
}

/* If a paragraph wraps the button, hide its text but keep the button */
.y-wrap > p { 
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; padding: 0 !important;
}
.y-wrap > p .y-btn { 
  font: 800 14px/1 "Barlow",system-ui !important; 
}

/* Kill any pseudo text layers some themes add */
.y-wrap > p::before,
.y-wrap > p::after { content: none !important; }

/* Ensure the button sits above any leftover content */
.y-wrap > p .y-btn { position: relative; z-index: 2; }

/***********************
  4) Keep brand buttons consistent (desktop & mobile)
***********************/
body .y-btn, body .y-cta{
  background: linear-gradient(180deg,#ffbf35,#ffb703) !important;
  border: 2px solid #ffb703 !important;
  color:#0b2239 !important;
  border-radius:999px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
}
body .y-btn::before, body .y-cta::before{ content:none !important; }
/* === Get Prepped For Your Trip (theme-level styles) === */
.get-prepped{
  --gp-img: url('https://stayconnectedflorida.com/wp-content/uploads/2025/09/6791053.jpg'); /* fallback */
  position:relative; overflow:hidden;
  background-image: var(--gp-img);
  background-size: cover; background-position: center 40%;
  border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.22);
  margin: 12px 0 18px;
  aspect-ratio: 16 / 6; /* desktop banner */
  isolation: isolate;
}
@media (max-width: 782px){
  .get-prepped{ aspect-ratio: 4 / 3; background-position: center; }
}
.get-prepped::after{
  /* soft gradient veil for text readability */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,12,18,.05), rgba(6,12,18,.55));
}

.get-prepped .gp-wrap{
  max-width: 1200px; margin: 0 auto; height: 100%;
  padding: 18px 16px; position: relative; z-index: 1;
  display:flex; align-items:flex-start; /* place text near the top */
}

.get-prepped .gp-copy{
  max-width: 720px; color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.get-prepped .gp-title{
  margin: 4px 0 8px;
  font: 800 28px/1.15 Oswald, system-ui, sans-serif;
}
.get-prepped .gp-sub{
  margin: 0;
  font: 600 15px/1.35 Inter, system-ui, sans-serif;
}
@media (max-width: 782px){
  .get-prepped .gp-title{ font-size: 24px }
  .get-prepped .gp-sub{ font-size: 13px }
}

/* Optional: match your button look if you enable it */
.y-btn{
  position:relative !important; color:#0b2239 !important; text-shadow:none !important;
  background: linear-gradient(180deg,#ffbf35,#ffb703) !important;
  border:2px solid #ffb703 !important; border-radius:999px !important;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px !important; font:800 14px/1.1 Inter,system-ui !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
}
/* === Kill ALL nav link background boxes (normal, hover, current, sticky) === */
.main-navigation,
.main-navigation.is_stuck {
  background: linear-gradient(90deg, #0fb9d6 0%, #28c7be 55%, #ffb703 100%) !important;
}

/* wipe inner wrappers just in case */
.inside-header,
.inside-navigation {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* target every menu link state + Superfish hover + GP "current" states */
.main-navigation .main-nav ul li > a,
.main-navigation .main-nav ul li > a:link,
.main-navigation .main-nav ul li > a:visited,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li[class*="current"] > a,
.main-navigation .menu-bar-items a,
.main-navigation .menu-bar-items a:hover,
.main-navigation .menu-bar-items a:focus,
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
  background: transparent !important;   /* <-- removes the box */
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* underline-only on hover/current (no fill) */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current"] > a {
  background: transparent !important;
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* keyboard focus visible without a fill box */
.main-navigation .main-nav ul li > a:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid rgba(255,255,255,.75) !important;
  outline-offset: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* belt-and-suspenders: if GP injects a pseudo highlight bar, make it transparent */
.main-navigation .main-nav ul li > a::before,
.main-navigation .main-nav ul li > a::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* keep dropdown panel styling as you had it */
.main-navigation ul ul{
  background: rgba(11,34,57,.96) !important;
  border-radius: 8px;
}
.main-navigation ul ul li a{ color:#fff !important; padding:10px 16px; }
.main-navigation ul ul li a:hover{ background:#ffb703 !important; color:#0b2239 !important; }
/* === Stay Connected · Two-wide Mobile Card Grid === */
.sc-grid{
  /* Layout controls (change per grid by overriding inline if you want) */
  --cols-desktop: 4;     /* 3 or 4 are good defaults on desktop */
  --cols-tablet: 3;      /* 2 or 3 on tablets */
  --cols-mobile: 2;      /* <- REQUIRED: two across on phones */
  --gap: 16px;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.18);

  max-width: 1200px;
  margin: 10px auto;
  padding: 0 12px;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols-desktop), minmax(0,1fr));
}

/* tablet */
@media (max-width: 1024px){
  .sc-grid{
    grid-template-columns: repeat(var(--cols-tablet), minmax(0,1fr));
    gap: 14px;
  }
}

/* mobile — always 2 across */
@media (max-width: 640px){
  .sc-grid{
    grid-template-columns: repeat(var(--cols-mobile), minmax(0,1fr));
    gap: 12px;
  }
}

/* Card */
.sc-card{
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #0f141a;
  aspect-ratio: 3 / 2;                 /* roomy shape that still fits 2-up on phones */
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
@media (max-width:640px){
  .sc-card{ aspect-ratio: 4 / 3; }     /* a touch taller on phones for readability */
}

/* Image */
.sc-card::before{
  content:"";
  position:absolute; inset:0;
  background: var(--img, #0f141a) center/cover no-repeat;
  transform: scale(1.02);
}

/* Caption (bottom) */
.sc-card .sc-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(6,12,18,0) 0%, rgba(6,12,18,.86) 55%, rgba(6,12,18,.92) 100%);
  color:#fff; text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.sc-card .sc-title{
  margin:0 0 4px; font: 800 18px/1.2 Oswald, system-ui, sans-serif;
}
.sc-card .sc-sub{
  margin:0; font: 600 13px/1.25 Inter, system-ui, sans-serif; opacity:.95;
}
@media (max-width:640px){
  .sc-card .sc-title{ font-size: 17px }
  .sc-card .sc-sub{ font-size: 12px }
}

/* Hover */
.sc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.26);
  filter: brightness(1.03);
}

/* Optional utility: pull grid tighter to heading */
.sc-grid.tight{ margin-top: 4px; }
/* === MOBILE: 2-wide, big square cards (fills most of the screen) === */
@media (max-width: 640px){
  .sc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 8px !important;
    margin-top: 6px !important;
  }
  .sc-card{
    aspect-ratio: 1 / 1 !important;      /* big squares */
    border-radius: 16px !important;
  }
  .sc-card .sc-cap{ padding: 12px 12px 10px !important; }
  .sc-card .sc-title{ font-size: 18px !important; line-height: 1.2; }
  .sc-card .sc-sub{ font-size: 12px !important; line-height: 1.25; }
}