/* ==========================================================================
   Socials sekce (Instagram feed)
   --------------------------------------------------------------------------
   Presunuto beze zmeny z components/footer.css, kde tenhle blok tvoril pres
   polovinu souboru a nemel s patickou nic spolecneho. Markup zije v
   page-onas.php (sablona homepage), takze se styl nacita podminene - viz
   $conditional ve functions.php.
   ========================================================================== */

/*SOCIALS SECTION */
.socials-section {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--bg);
}

.socials-section h2 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: bold;
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
}


.socials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
}

.social-card {
  width: 150px;
  height: 150px;
  background: #ddd;
  border-radius: 5px;
}

.btn-follow {
  margin-bottom: 1rem;
  
  font-size: 1.2rem;
  
  background: var(--accent);
  color: white;
  font-weight: bold;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* header row for title + button (mobile stays stacked by default) */
.socials-head {
  display: grid;
  justify-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

/* ---- Desktop: full-width carousel ---- */
@media (min-width: 1100px) {
  .socials-section {
    padding: 4rem 0;
  }

  /* center title, push Follow to the right */
  .socials-head {
    position: relative;
    grid-template-columns: 1fr auto 1fr; /* spacer | button | spacer behind centered title */
    justify-items: center;
    align-items: center;
    margin: 0 auto 1rem;
    max-width: 1200px;
  }
  .socials-head h2 {
    grid-column: 2 / 3;         /* center */
    font-size: 2.2rem;
    margin: 0;  
  }
  .socials-head .btn-follow {
  
    
    margin: 0;
  }

  /* make the rail full-bleed (100vw) with soft fades on the edges */
  .socials-rail {
    --fade: 80px;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%
    );
            mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%
    );
  }

  /* turn the grid into a horizontal scroll track */
  .socials-grid {
    display: flex;               /* overrides mobile grid */
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 max(4vw, var(--fade));   /* space for fades at edges */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .socials-grid::-webkit-scrollbar { display: none; }

  /* cards as slides */
  .social-card {
    flex: 0 0 clamp(360px, 32vw, 560px);
    height: clamp(220px, 32vw, 340px);
    border-radius: 5px;
    background: #ddd;
    scroll-snap-align: start;
  }
}

/* Keep your existing section styles, then add: */

/* Ensure the feed fits inside your rail/grid container nicely */
.socials-section .socials-rail {
  overflow: hidden;
}

/* Make plugin images fill like your cards */
.socials-section #sbi_images .sbi_item .sbi_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Remove any default gaps if you set imagepadding=0 */
.socials-section #sbi_images .sbi_item {
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsiveness (if you want to enforce your own breakpoints) */
@media (max-width: 900px) {
  .socials-section #sbi_images {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}