/* ==========================================================================
   Editorial Theme – Homepage
   Covers: hero, carousel, sidebar, post grid, ad slots
   ========================================================================== */

/* ── Reset / base ─────────────────────────────────────────────────────────── */
.spb-page *,
.spb-page *::before,
.spb-page *::after {
  box-sizing: border-box;
}

.spb-page {
  font-family:      var(--spb-font-body, inherit);
  font-size:        var(--spb-font-base, 16px);
  color:            var(--spb-text, #1a202c);
  background-color: var(--spb-bg, #fff);
}

/* ── Container ────────────────────────────────────────────────────────────── */
.spb-container {
  width:      100%;
  max-width:  var(--spb-container, 1280px);
  margin:     0 auto;
  padding:    0 1.25rem;
}

/* ── Category strip ──────────────────────────────────────────────────────── */
.spb-cat-strip {
  background:    var(--spb-surface, #f7f8fa);
  border-bottom: 1px solid var(--spb-border, #e2e8f0);
}

.spb-cat-strip__inner {
  display:     flex;
  gap:         0;
  overflow-x:  auto;
  -ms-overflow-style: none;
  scrollbar-width:    none;
}

.spb-cat-strip__inner::-webkit-scrollbar { display: none; }

.spb-cat-strip__link {
  display:     block;
  padding:     .6rem 1rem;
  font-size:   .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:       var(--spb-text, #1a202c);
  white-space: nowrap;
  text-decoration: none;
  border-bottom:   3px solid transparent;
  transition:  color .15s, border-color .15s;
}

.spb-cat-strip__link:hover,
.spb-cat-strip__link.is-active {
  color:        var(--spb-primary, #c53030);
  border-color: var(--spb-primary, #c53030);
}

/* ── Ad slot – header (728 × 90) ─────────────────────────────────────────── */
.spb-ad-header,
.spb-ad-billboard {
  padding: var(--spb-spacing, 48px) 0 1rem;
}

/* Centre fixed-size ads; responsive (full-width) ads fill the container naturally. */
.spb-ad-header .spb-container,
.spb-ad-billboard .spb-container {
  text-align: center;
}

.spb-ad-header .spb-container ins,
.spb-ad-billboard .spb-container ins {
  display: block;
  margin:  0 auto;
}

/* When header ad is present the hero's own top padding would double the
   gap – cancel it; the ad slot's padding-bottom already provides it. */
.has-header-ad .spb-hero-wrap {
  padding-top: 0;
}

/* ── Ad placeholder (shown when slot enabled but no code entered) ─────────── */
.spb-ad-placeholder {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #f7f7f7;
  border:          1px solid #ebebeb;
  box-sizing:      border-box;
}

.spb-ad-placeholder__badge {
  font-size:      .6rem;
  font-weight:    700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          #6b6b6b; /* 5.1:1 on #f7f7f7 – passes WCAG AA */
  user-select:    none;
}

/* ── Hero & Carousel ──────────────────────────────────────────────────────── */
.spb-hero-wrap {
  display:   grid;
  gap:       1.5rem;
  padding:   var(--spb-spacing, 48px) 0;
}

/* With sidebar */
.spb-hero-wrap.has-sidebar {
  grid-template-columns: var(--spb-hero-layout-cols, 2fr 300px);
  align-items: stretch; /* sidebar always matches hero height exactly */
}

/* ── Hero card ──────────────────────────────────────────────────────────────── */
.spb-hero {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--spb-radius, 6px);
  aspect-ratio:  16 / 9;
  background:    #000;
  width:         100%;   /* fill the grid column */
  min-width:     0;      /* allow shrinking below intrinsic size */
}

.spb-hero__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .35s ease;
}

.spb-hero:hover .spb-hero__img {
  transform: scale(1.03);
}

.spb-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
}

.spb-hero__body {
  position:  absolute;
  bottom:    0;
  left:      0;
  right:     0;
  padding:   1.5rem;
  color:     #fff;
}

.spb-hero__cat {
  display:          inline-block;
  background:       var(--spb-primary, #c53030);
  color:            #fff;
  font-size:        .7rem;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   .08em;
  padding:          .2rem .55rem;
  border-radius:    calc(var(--spb-radius, 6px) * 0.5);
  margin-bottom:    .5rem;
  text-decoration:  none;
}

.spb-hero__title {
  font-family:  var(--spb-font-heading, inherit);
  font-size:    clamp(1.4rem, 3vw, 2rem);
  font-weight:  800;
  line-height:  1.2;
  margin:       0 0 .5rem;
  color:        #fff;
  text-shadow:  0 1px 3px rgba(0,0,0,.4);
}

.spb-hero__title a {
  color: inherit;
  text-decoration: none;
}

.spb-hero__title a:hover {
  text-decoration: underline;
}

.spb-hero__meta {
  font-size:   .8rem;
  opacity:     .8;
}

/* ── Carousel ──────────────────────────────────────────────────────────────── */
.spb-carousel {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--spb-radius, 6px);
  aspect-ratio:  16 / 9;
  background:    #000;
  width:         100%;   /* fill the grid column */
  min-width:     0;      /* allow shrinking below intrinsic size */
}

.spb-carousel__track {
  display:    flex;
  height:     100%;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}

.spb-carousel__slide {
  flex:       0 0 100%;
  position:   relative;
  overflow:   hidden;
}

.spb-carousel__slide .spb-hero__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.spb-carousel__slide .spb-hero__overlay,
.spb-carousel__slide .spb-hero__body {
  position: absolute;
}

.spb-carousel__slide .spb-hero__overlay {
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
}

.spb-carousel__slide .spb-hero__body {
  bottom:  0;
  left:    0;
  right:   0;
  padding: 1.5rem;
  color:   #fff;
}

/* Prev / Next buttons */
.spb-carousel__btn {
  position:      absolute;
  top:           50%;
  transform:     translateY(-50%);
  background:    rgba(0,0,0,.55);
  color:         #fff;
  border:        none;
  border-radius: 50%;
  width:         2.5rem;
  height:        2.5rem;
  font-size:     1.25rem;
  cursor:        pointer;
  transition:    background .15s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  z-index:       10;
  line-height:   1;
}

.spb-carousel__btn:hover { background: rgba(0,0,0,.85); }
.spb-carousel__btn--prev { left:  .75rem; }
.spb-carousel__btn--next { right: .75rem; }

/* Dots */
.spb-carousel__dots {
  position:  absolute;
  bottom:    .75rem;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       .35rem;
  z-index:   10;
}

.spb-carousel__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    rgba(255,255,255,.55);
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    background .15s, transform .15s;
}

.spb-carousel__dot.is-active {
  background:  #fff;
  transform:   scale(1.3);
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.spb-sidebar {
  height:         100%;        /* fill grid cell – matches hero height exactly */
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-width:      0;           /* allow shrinking in grid */
  width:          100%;
}

/* Posts list: fills remaining space, distributes cards equally */
.spb-sidebar__posts {
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-height:     0;   /* allow shrink below content size */
}

.spb-sidebar__heading {
  font-family:    var(--spb-font-heading, inherit);
  font-size:      .75rem;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--spb-muted, #5a6778); /* 5.77:1 on white – passes WCAG AA */
  padding-bottom: .5rem;
  border-bottom:  2px solid var(--spb-primary, #c53030);
  margin-bottom:  .25rem;
}

.spb-sidebar-card {
  flex:           1;           /* each card gets exactly 1/N of the sidebar height */
  min-height:     0;           /* allow shrink */
  display:        flex;
  gap:            .75rem;
  align-items:    center;      /* vertically centre content in the equal slot */
  border-bottom:  1px solid var(--spb-border, #e2e8f0);
  padding:        .45rem 0;
}

.spb-sidebar-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.spb-sidebar-card__thumb {
  flex-shrink: 0;
  width:       80px;
  height:      60px;
  overflow:    hidden;
  border-radius: calc(var(--spb-radius, 6px) * 0.6);
  background:  var(--spb-surface, #f7f8fa);
}

.spb-sidebar-card__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.spb-sidebar-card__body {
  flex:       1;
  min-width:  0;
}

.spb-sidebar-card__cat {
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--spb-primary, #c53030);
  text-decoration: none;
  display:        block;
  margin-bottom:  .1rem;
  padding-block:  .3rem; /* touch target ≥ 24px */
}

.spb-sidebar-card__title {
  font-family:  var(--spb-font-heading, inherit);
  font-size:    .88rem;
  font-weight:  700;
  line-height:  1.3;
  margin:       0 0 .25rem;
  overflow:     hidden;
  display:      -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.spb-sidebar-card__title a {
  color:           var(--spb-text, #1a202c);
  text-decoration: none;
}

.spb-sidebar-card__title a:hover {
  color: var(--spb-primary, #c53030);
}

.spb-sidebar-card__meta {
  font-size: .72rem;
  color:     var(--spb-muted, #5a6778);
}

/* ── Ad slot – billboard (970 × 90) ─────────────────────────────────────── */
/* Spacing and flex are inherited from the shared rule above. */

/* ── Post Grid ──────────────────────────────────────────────────────────────── */
.spb-grid-section {
  padding: var(--spb-spacing, 48px) 0;
}

.spb-grid-section__heading {
  font-family:    var(--spb-font-heading, inherit);
  font-size:      .75rem;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--spb-muted, #5a6778);
  padding-bottom: .5rem;
  border-bottom:  2px solid var(--spb-primary, #c53030);
  margin:         0 0 1.5rem;
}

.spb-grid {
  display:               grid;
  grid-template-columns: repeat(var(--spb-grid-cols, 3), 1fr);
  gap:                   1.5rem;
}

/* ── Post card (grid item) ───────────────────────────────────────────────── */
.spb-card {
  display:        flex;
  flex-direction: column;
  background:     var(--spb-bg, #fff);
  border-radius:  var(--spb-radius, 6px);
  overflow:       hidden;
  border:         1px solid var(--spb-border, #e2e8f0);
  transition:     box-shadow .2s, transform .2s;
}

.spb-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform:  translateY(-2px);
}

.spb-card__thumb {
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  background:   var(--spb-surface, #f7f8fa);
}

.spb-card__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .35s ease;
}

.spb-card:hover .spb-card__thumb img {
  transform: scale(1.05);
}

.spb-card__body {
  flex:    1;
  padding: 1rem;
}

.spb-card__cat {
  font-size:       .68rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .07em;
  color:           var(--spb-primary, #c53030);
  text-decoration: none;
  display:         block;
  margin-bottom:   .2rem;
  padding-block:   .25rem; /* touch target ≥ 24px */
}

.spb-card__title {
  font-family: var(--spb-font-heading, inherit);
  font-size:   1rem;
  font-weight: 700;
  line-height: 1.35;
  margin:      0 0 .5rem;
}

.spb-card__title a {
  color:           var(--spb-text, #1a202c);
  text-decoration: none;
}

.spb-card__title a:hover {
  color: var(--spb-primary, #c53030);
}

.spb-card__excerpt {
  font-size:   .875rem;
  color:       var(--spb-muted, #5a6778);
  line-height: 1.5;
  margin:      0 0 .75rem;
  overflow:    hidden;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.spb-card__meta {
  font-size: .72rem;
  color:     var(--spb-muted, #5a6778);
}

/* ── In-grid ad slot (300 × 250) ─────────────────────────────────────────── */
.spb-ad-ingrid {
  border-radius: var(--spb-radius, 6px);
  border:        1px solid var(--spb-border, #e2e8f0);
  padding:       .5rem;
  text-align:    center;
}

/* Centre fixed-size ads; responsive ads fill the cell naturally. */
.spb-ad-ingrid ins {
  display: block;
  margin:  0 auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Clamp sidebar column to a reasonable width on medium screens */
  .spb-hero-wrap.has-sidebar {
    grid-template-columns: 1fr 260px;
  }
}

@media (max-width: 768px) {
  /* Stack vertically – sidebar reverts to natural height */
  .spb-hero-wrap.has-sidebar {
    grid-template-columns: 1fr;
  }

  .spb-sidebar {
    height:   auto;
    overflow: visible;
  }

  .spb-sidebar__posts {
    flex: none;
  }

  .spb-sidebar-card {
    flex:          none;
    border-bottom: 1px solid var(--spb-border, #e2e8f0);
    padding:       .75rem 0;
  }

  .spb-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero title – prevent overflow on small screens */
  .spb-hero__title,
  .spb-carousel__slide .spb-hero__title {
    font-size: clamp(.95rem, 4.5vw, 1.35rem);
  }
}

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