/* ─── Philippine Business Insights Carousel ───────────────────── */

#insights-carousel {
  width: 100%;
  max-width: 100%;
  /* min-width:0 is critical: without it, the cascade of width:100% elements
     inside (ic-wrap → ic-track → slides) participates in the CSS Grid
     min-content track-sizing pass. The slides' max-content (~127px each × 4)
     sums to ~510px and forces the hero-grid's 1fr column to 510px instead of
     364px, clipping every element in hero-content and hero-visual at the right.
     Explicitly 0 overrides the browser's intrinsic min-width fallback. */
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 0 16px;
}

.ic-wrap {
  width: 100%;
  min-width: 0;       /* belt-and-suspenders: same reason as #insights-carousel */
  box-sizing: border-box;
  position: relative; /* required: Safari needs position context on the
                         overflow:hidden element to clip transformed children */
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 2px 18px rgba(15, 14, 13, 0.09);
  border: 1px solid rgba(230, 193, 90, .22);
}

.ic-track {
  display: flex;
  width: 100%;
  overflow: hidden;   /* clips slides that extend beyond the track's right edge */
  /* will-change omitted: JS sets the actual transform at runtime; the ahead-of-time
     hint can promote the track to a compositing layer that bypasses the parent's
     overflow:hidden on non-composited ancestors */
}

.ic-slide {
  flex: 0 0 100%;
  min-width: 0;         /* prevents flex item from exceeding container */
  width: 100%;
  min-height: 70px;     /* was 110px → −25%, now −15% more */
  padding: 4px 14px 2px; /* was 10px 14px 6px → tighter vertical */
  box-sizing: border-box;
  background: rgba(14, 12, 8, .72);
  border-left: 3px solid var(--color-gold, #C8963E);
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  cursor: pointer;      /* whole card is clickable */
}
.ic-slide:focus-visible {
  outline: 2px solid var(--color-gold, #C8963E);
  outline-offset: 2px;
}

.ic-tag {
  display: inline-block;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.5rem;    /* was 0.575rem */
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0F0E0D;
  background: var(--color-gold, #C8963E);
  padding: 2px 7px;     /* was 3px 9px */
  border-radius: 20px;
  margin-bottom: 1px;   /* was 10px */
  align-self: flex-start;
}

.ic-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.05rem;   /* was 1.15rem */
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.15;    /* was 1.2 */
  margin: 0 0 1px;      /* was 0 0 8px */
  text-wrap: balance;
}

.ic-sub {
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.85rem;   /* was 0.9rem */
  color: #D9CDBC;
  line-height: 1.3;     /* was 1.6 */
  margin: 0 0 1px;      /* was 0 0 10px */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.ic-source {
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.75rem;   /* was 0.6rem — per task spec */
  color: rgba(200, 185, 160, .70);
  text-align: left;
  margin: 0 0 2px;      /* was 0 0 14px */
}

.ic-source a {
  color: var(--color-gold, #C8963E);
  text-decoration: none;
}

.ic-source a:hover {
  text-decoration: underline;
}

.ic-cta {
  display: inline-block;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.62rem;   /* was 0.7rem */
  font-weight: 700;
  color: #0F0E0D;
  background: var(--color-gold, #C8963E);
  padding: 5px 13px;    /* compact visual; tap area extended by ::before */
  border-radius: 20px;
  text-decoration: none;
  align-self: flex-start;
  transition: opacity 0.15s;
  position: relative;   /* positioning context for tap-target pseudo */
}
/* Expand touch target to ≥40px without adding layout height */
.ic-cta::before {
  content: '';
  position: absolute;
  inset: -9px -4px;     /* extends tap area ≥40px tall around the ~22px pill */
}

.ic-cta:hover {
  opacity: 0.82;
}

.ic-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 10px 0 2px;
}

.ic-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold, #C8963E);
  opacity: 0.50;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.ic-dot[aria-current="true"] {
  opacity: 1;
}

@media (min-width: 540px) {
  .ic-slide {
    min-height: 95px;       /* was 220px → −15% more from 112px */
    padding: 7px 18px 5px;  /* was 24px 22px 20px → tighter vertical */
  }

  .ic-title {
    font-size: 1.18rem;     /* was 1.3rem */
  }
}

@media (min-width: 1024px) {
  #insights-carousel {
    margin-bottom: 20px;
  }

  .ic-slide {
    min-height: 108px;      /* was 240px → −15% more from 127px */
    padding: 10px 22px 7px; /* was 28px 28px 22px → tighter vertical */
  }

  .ic-title {
    font-size: 1.28rem;     /* was 1.4rem */
  }
}

@media (prefers-reduced-motion: reduce) {
  .ic-track {
    transition: none !important;
  }
}

/* ── Image-card slide ─────────────────────────────────────── */
.ic-slide--image {
  display: block;      /* override flex column from .ic-slide */
  padding: 0;
  min-height: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-left: none;
  cursor: default;
  line-height: 0;      /* kill phantom space below <img> */
}

.ic-image-link {
  display: block;
  width: 100%;
}

.ic-image-link picture {
  display: block;      /* <picture> is inline by default */
  width: 100%;
}

.ic-image-link img {
  display: block;
  width: 100%;
  height: auto;
}

.ic-image-link:focus-visible {
  outline: 2px solid var(--color-gold, #C8963E);
  outline-offset: 2px;
}