/* =============================================================================
   AdStar landing — use-cases.css
   Section: "Built for the ones shipping ads"
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section heading — reuse .section-head from layout.css,
   only extra spacing needed below the title block.
   -------------------------------------------------------------------------- */
.use-cases__head {
  margin-bottom: 60px;
}

/* --------------------------------------------------------------------------
   Grid wrapper
   Relative container that holds the 3-col grid plus the overlay dividers.
   -------------------------------------------------------------------------- */
.use-cases__grid-wrap {
  position: relative;
}

/* --------------------------------------------------------------------------
   The 2-row × 3-column grid
   Uses CSS Grid so every card aligns precisely.
   -------------------------------------------------------------------------- */
.use-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  /* 80px vertical gap between row 1 and row 2 (matches Figma 80px gap) */
  row-gap: 80px;
  /* 88px column gap between cells — dividers are drawn with pseudo-elements */
  column-gap: 88px;
}

/* --------------------------------------------------------------------------
   Individual card
   -------------------------------------------------------------------------- */
.use-cases__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Align icon to top-left — no centering */
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Icon
   -------------------------------------------------------------------------- */
.use-cases__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  /* Icons are lime-colored SVGs; no filter needed — they're already lime */
}

/* --------------------------------------------------------------------------
   Copy block (title + description)
   -------------------------------------------------------------------------- */
.use-cases__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.use-cases__title {
  font-size: var(--fs-lg);        /* 18px */
  line-height: var(--lh-lg);      /* 28px */
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.use-cases__desc {
  font-size: var(--fs-sm);        /* 14px */
  line-height: var(--lh-sm);      /* 20px */
  font-weight: 400;
  color: var(--text-secondary);   /* #999 */
  margin: 0;
}

/* --------------------------------------------------------------------------
   Vertical dividers
   Positioned absolutely at the 1/3 and 2/3 column boundaries.
   Use the vertical-divider.png (a subtle gradient line, top-to-bottom fade).
   -------------------------------------------------------------------------- */
.use-cases__vdiv {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  /* Fallback gradient if image fails */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--border-strong) 20%,
    var(--border-strong) 80%,
    transparent 100%
  );
  /* Override with the actual asset via mask-image technique:
     the PNG already encodes the fade so we just display it */
  background-image: url("../images/use-cases/vertical-divider.png");
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.use-cases__vdiv--left {
  /*
   * Grid: 3 equal cols + 2 × 88px gaps.
   * Left divider sits at: 1 col-width + 44px (half of gap).
   * col-width = (100% - 176px) / 3
   * left = (100% - 176px) / 3 + 44px
   */
  left: calc((100% - 176px) / 3 + 44px);
}

.use-cases__vdiv--right {
  /*
   * Right divider sits symmetrically from the right edge.
   * right = (100% - 176px) / 3 + 44px
   */
  right: calc((100% - 176px) / 3 + 44px);
}

/* --------------------------------------------------------------------------
   Horizontal divider between row 1 and row 2
   A full-width gradient line: transparent → #282828 → transparent
   Placed at the vertical midpoint of the grid (at the row gap centre).
   -------------------------------------------------------------------------- */
.use-cases__hdiv {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  /* Place at 50% of the grid wrapper height — the gap straddles this point */
  top: 50%;
  background: linear-gradient(
    to right,
    transparent 0%,
    #282828 30%,
    #282828 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Tablet — 768–1024 px
   Drop to 2 columns × 3 rows (matches Figma): one centered vertical divider
   and two horizontal dividers between the three rows.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .use-cases__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    row-gap: 60px;
  }

  /* Single vertical divider centered in the column gap; hide the second one. */
  .use-cases__vdiv--left  { left: 50%; }
  .use-cases__vdiv--right { display: none; }

  .use-cases__head {
    margin-bottom: 48px;
  }
}

/* Tablet only (not mobile): two horizontal dividers at the row gaps. The single
   .use-cases__hdiv (placed at 50%) suits the 2-row desktop layout; for 3 rows we
   draw two lines via pseudo-elements at the ~1/3 and ~2/3 gaps instead. */
@media (min-width: 768px) and (max-width: 1024px) {
  .use-cases__hdiv { display: none; }

  .use-cases__grid-wrap::before,
  .use-cases__grid-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      #282828 30%,
      #282828 70%,
      transparent 100%
    );
    pointer-events: none;
  }
  .use-cases__grid-wrap::before { top: 33.33%; }
  .use-cases__grid-wrap::after  { top: 66.66%; }
}

/* --------------------------------------------------------------------------
   Mobile — ≤ 767 px
   Stack to a single column; drop vertical dividers; keep horizontal divider
   but hide it too (single column = no visual midpoint needed).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .use-cases__head {
    margin-bottom: 40px;
  }

  .use-cases__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }

  /* Hide vertical dividers on mobile */
  .use-cases__vdiv {
    display: none;
  }

  /* Hide horizontal divider on mobile (single-column layout has no row split) */
  .use-cases__hdiv {
    display: none;
  }

  /* Center icon + text on mobile (single column) instead of left-aligning. */
  .use-cases__card {
    gap: 16px;
    align-items: center;
    text-align: center;
  }
}