/* Mobile-only refinements for Sunny Days (<= 768px) */
@media (max-width: 768px) {

  /* --- A) Card sections become smooth horizontal sliders --- */
  /* Applies to archive grids and any .cards-grid used in sections (projects, resources, webinars, testimonials*) */
  .cards-grid{
    display: flex !important;
    gap: 1px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;                /* room for scrollbar */
  }
  .cards-grid > .card,
  .cards-grid > article.card,
  .cards-grid > blockquote.card{
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }

  /* Keep card media tidy and consistent */
  .cards-grid .card img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    object-fit: cover;
    aspect-ratio: 16 / 9;              /* browsers that support it */
  }

  /* --- A'') Testimonials: highlight the next card --- */
  .sd-section.soft .cards-grid{
    display: flex !important;
    gap: 1px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scroll-padding-left: 18px;
  }
  .sd-section.soft .cards-grid blockquote.card{
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
    margin-right: 12px;
  }
  .sd-section.soft .cards-grid blockquote.card:last-child{
    margin-right: 18px;
  }
  .sd-testimonials .cards-grid blockquote.card{
    flex: 0 0 76% !important;
    max-width: 76% !important;
    margin-right: 16px;
  }
  .sd-testimonials .cards-grid blockquote.card:last-child{
    margin-right: 24px;
  }

  /* --- B) Fix the tall search input on archive page heroes --- */
  /* Your desktop rule uses: flex: 1 1 260px; which creates the mobile height issue. */
  .page-hero__search{
    flex-wrap: nowrap;                  /* keep input + button on a line (will scroll if tiny screens) */
    gap: 8px;
  }
  .page-hero__search input[type="search"]{
    flex: 1 1 auto !important;
    min-height: 44px;
    height: 44px;
    padding: 12px 14px;
  }
  .page-hero__search .btn{
    flex: 0 0 auto;
    height: 44px;
    padding: 0 16px;
    line-height: 44px;                  /* vertical center text */
    white-space: nowrap;
  }

  /* If you prefer stacked layout (full-width input then button), swap the block above for this:
  .page-hero__search{ flex-direction: column; align-items: stretch; }
  .page-hero__search .btn{ width: 100%; }
  */

  /* --- C) Section rhythm and readability on small screens --- */
  /* Use your tokens but tighten slightly on phones */
  :root{
    --sd-section-pad: clamp(36px, 7.5vw, 64px);
    --sd-band-pad:    clamp(32px, 7vw, 56px);
  }

  .container{
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Headings scale—keeps hierarchy but prevents wrap chaos */
  .sd-header h2{ font-size: clamp(22px, 6.2vw, 28px); }
  .sd-header .sd-eyebrow{ font-size: 12px; }

  /* Buttons slightly smaller for better fit */
  .btn{ padding: 12px 18px; font-size: 15px; }

  /* --- D) Small utilities for safer text wrapping --- */
  .card h3, .card .entry-title{ word-break: break-word; }
  .page-hero__lead{ font-size: 15.5px; line-height: 1.5; }

  /* --- E) Keep social feed and embeds within viewport height --- */
  .section-social .feed{
    max-block-size: min(70vh, var(--sd-feed-h));
  }
}