/*
 * Afew Solutions Articles — editorial grid.
 * All rules are scoped under .afew-articles. Colours/fonts come from CSS custom properties set
 * inline on the wrapper (with fallbacks here).
 */

.afew-articles {
  --ca-accent: #082a7b;
  --ca-heading-color: #082a7b;
  --ca-title-color: #1a1a1a;
  --ca-meta-color: #6b7280;
  --afew-card-bg: #ffffff;
  --ca-heading-font: inherit;
  --ca-title-font: inherit;
  --ca-body-font: inherit;
  --ca-cols: 3;

  display: grid;
  grid-template-columns: repeat(var(--ca-cols, 3), minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--ca-body-font, inherit);
  box-sizing: border-box;
  /* Never let the block cause page-level horizontal scrolling; the carousel scrolls internally. */
  max-width: min(1200px, 100%);
  overflow-x: clip;
  /* Stop Android/Samsung "font boosting" (text auto-sizing). Inside the wide, horizontally
     scrolling carousel, Chrome-on-Android and Samsung Internet would inflate card text per-block,
     giving cards different heights/widths and the appearance of "resizing" — while iOS Safari and
     desktop (which don't boost) looked fine. This pins text to its authored size on all engines. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.afew-articles *,
.afew-articles *::before,
.afew-articles *::after {
  box-sizing: border-box;
}

.afew-articles .afew-section-title {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  text-align: center;
  color: var(--ca-heading-color, #082a7b);
  font-family: var(--ca-heading-font, inherit);
  font-size: var(--afew-section-size, 35px);
  line-height: 1.2;
}

/* Card */
.afew-articles .afew-card {
  display: flex;
  flex-direction: column;
  background: var(--afew-card-bg, #fff);
  border: 1px solid var(--afew-card-border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.afew-articles .afew-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.afew-articles .afew-card__imagelink {
  display: block;
  aspect-ratio: var(--afew-img-ratio, 16 / 10);
  overflow: hidden;
  background: color-mix(in srgb, var(--ca-accent, #082a7b) 10%, #f3f4f6);
}
.afew-articles .afew-card__imagelink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.afew-articles .afew-card:hover .afew-card__imagelink img {
  transform: scale(1.05);
}
.afew-articles .afew-card__noimage {
  display: block;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--ca-accent, #082a7b) 12%, #eef0f4);
}

.afew-articles .afew-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px 20px;
  flex: 1;
}

.afew-articles .afew-card__cat {
  display: inline-block;
  background: var(--ca-accent, #082a7b);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
}
.afew-articles .afew-card__cat:hover {
  filter: brightness(1.12);
}

.afew-articles .afew-card__title {
  margin: 2px 0 0;
  font-family: var(--ca-title-font, inherit);
  font-size: var(--afew-title-size, 18px);
  line-height: 1.3;
  font-weight: 600;
  /* Break very long words / URLs instead of overflowing the card. */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
.afew-articles .afew-card__title a {
  color: var(--ca-title-color, #1a1a1a);
  text-decoration: none;
}
.afew-articles .afew-card__title a:hover {
  color: var(--ca-accent, #082a7b);
}

.afew-articles .afew-card__meta {
  margin: 0;
  color: var(--ca-meta-color, #6b7280);
  font-size: 0.82rem;
}
.afew-articles .afew-card__sep {
  margin: 0 6px;
}

.afew-articles .afew-card__excerpt {
  margin: 4px 0 0;
  color: var(--ca-meta-color, #6b7280);
  font-size: 0.92rem;
  line-height: 1.6;
}

.afew-articles .afew-card__more {
  margin-top: auto;
  padding-top: 6px;
  color: var(--ca-accent, #082a7b);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.afew-articles .afew-card__more span[aria-hidden] {
  transition: transform 0.2s ease;
}
.afew-articles .afew-card__more:hover span[aria-hidden] {
  transform: translateX(4px);
}

/* Featured hero card spans the full row and lays out side by side. */
.afew-articles .afew-card--hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  flex-direction: row;
}
.afew-articles .afew-card--hero .afew-card__imagelink {
  aspect-ratio: auto;
  height: 100%;
  min-height: 300px;
}
.afew-articles .afew-card--hero .afew-card__body {
  align-self: center;
  padding: 32px;
  gap: 12px;
}

/* Stacked featured layout (image on top, text below) — opt-in via the "Featured Story Layout"
   setting. On mobile every hero is stacked regardless (see the responsive block). */
.afew-articles.afew-hero-stacked .afew-card--hero {
  display: flex;
  flex-direction: column;
}
.afew-articles.afew-hero-stacked .afew-card--hero .afew-card__imagelink {
  aspect-ratio: var(--afew-img-ratio, 16 / 10);
  height: auto;
  min-height: 0;
  max-height: 440px;
}
.afew-articles.afew-hero-stacked .afew-card--hero .afew-card__body {
  align-self: stretch;
  padding: 22px 26px 26px;
}

.afew-articles .afew-card--hero .afew-card__title {
  font-size: calc(var(--afew-title-size, 18px) * 1.45);
}
.afew-articles .afew-card--hero .afew-card__excerpt {
  font-size: 1rem;
}

/* "More articles" carousel below the grid */
.afew-articles .afew-carousel {
  grid-column: 1 / -1;
  margin-top: 8px;
}
.afew-articles .afew-carousel__heading {
  margin: 0 0 12px;
  font-family: var(--ca-title-font, inherit);
  color: var(--afew-carousel-heading, var(--ca-heading-color, #082a7b));
  font-size: 1.3rem;
}
.afew-articles .afew-carousel__viewport {
  position: relative;
}
.afew-articles .afew-carousel__track {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.afew-articles .afew-carousel__track::-webkit-scrollbar {
  display: none;
}
/* Carousel shows 4 compact cards per view (3 gaps of 16px). */
.afew-articles .afew-carousel__slide {
  flex: 0 0 calc((100% - 48px) / 4);
  scroll-snap-align: start;
  /* A flex item defaults to min-width:auto, whose floor is the content's min-content size — for a
     slide that's the featured image's intrinsic width. On narrow screens that floor can exceed the
     calc() basis, forcing slides wider than intended and unequal to each other (the Samsung
     symptom). min-width:0 lets the basis win so every slide is exactly one column wide. */
  min-width: 0;
}
/* The last card snaps to the right edge so you can't scroll into blank space past it. */
.afew-articles .afew-carousel__slide:last-child {
  scroll-snap-align: end;
}
.afew-articles .afew-carousel__slide .afew-card {
  height: 100%;
}
/* Compact, more-differentiated styling for carousel cards vs the larger grid cards. */
.afew-articles .afew-carousel__slide .afew-card__imagelink {
  aspect-ratio: var(--afew-img-ratio, 16 / 10);
}
.afew-articles .afew-carousel__slide .afew-card__body {
  padding: 12px 14px 14px;
  gap: 6px;
}
.afew-articles .afew-carousel__slide .afew-card__cat {
  font-size: 0.62rem;
  padding: 3px 8px;
}
.afew-articles .afew-carousel__slide .afew-card__title {
  font-size: calc(var(--afew-title-size, 18px) * 0.85);
}
.afew-articles .afew-carousel__slide .afew-card__meta {
  font-size: 0.74rem;
}
.afew-articles .afew-carousel__slide .afew-card__excerpt {
  display: none;
}
.afew-articles .afew-carousel__slide .afew-card__more {
  font-size: 0.78rem;
}
.afew-articles .afew-carousel__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ca-accent, #082a7b);
  color: #fff;
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.afew-articles .afew-carousel__nav svg {
  width: 20px;
  height: 20px;
  display: block;
}
.afew-articles .afew-carousel__nav:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.08);
}
.afew-articles .afew-carousel__nav:disabled {
  opacity: 0.3;
  cursor: default;
}
/* Inset so the arrows sit over the card edges rather than outside the track — avoids
   horizontal overflow on full-width / mobile layouts. */
.afew-articles .afew-carousel__nav--prev {
  left: 4px;
}
.afew-articles .afew-carousel__nav--next {
  right: 4px;
}

@media (max-width: 900px) {
  .afew-articles .afew-carousel__slide {
    flex-basis: calc((100% - 32px) / 3);
  }
}
@media (max-width: 600px) {
  .afew-articles .afew-carousel__slide {
    flex-basis: 60%;
  }
}

/* "View all" link below everything */
.afew-articles .afew-viewall {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 8px;
}
.afew-articles .afew-viewall__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border: 1px solid var(--ca-accent, #082a7b);
  border-radius: 6px;
  color: var(--ca-accent, #082a7b);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.afew-articles .afew-viewall__link:hover {
  background: var(--ca-accent, #082a7b);
  color: #fff;
}

/* Focus visibility */
.afew-articles a:focus-visible {
  outline: 2px solid var(--ca-accent, #082a7b);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Screen-reader-only helper (in case the theme doesn't define it) */
.afew-articles .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .afew-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  /* Keep a 2-column grid on phones (echoing the desktop grid) instead of giant full-width
     stacked cards. The featured story spans both columns; the rest become compact tiles. */
  .afew-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .afew-articles .afew-section-title {
    font-size: calc(var(--afew-section-size, 35px) * 0.72);
  }

  /* Featured hero: full width, image on top, keeps its excerpt. */
  .afew-articles .afew-card--hero {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .afew-articles .afew-card--hero .afew-card__imagelink {
    aspect-ratio: var(--afew-img-ratio, 16 / 10);
    min-height: 0;
  }
  .afew-articles .afew-card--hero .afew-card__body {
    padding: 16px 18px;
    gap: 8px;
  }
  .afew-articles .afew-card--hero .afew-card__title {
    font-size: calc(var(--afew-title-size, 18px) * 1.25);
  }
  .afew-articles .afew-card--hero .afew-card__excerpt {
    font-size: 0.92rem;
  }

  /* Non-hero cards become compact tiles (no excerpt) so two fit cleanly per row. */
  .afew-articles .afew-card:not(.afew-card--hero) .afew-card__imagelink {
    aspect-ratio: var(--afew-img-ratio, 16 / 10);
  }
  .afew-articles .afew-card:not(.afew-card--hero) .afew-card__body {
    padding: 10px 12px 12px;
    gap: 6px;
  }
  .afew-articles .afew-card:not(.afew-card--hero) .afew-card__title {
    font-size: calc(var(--afew-title-size, 18px) * 0.82);
    line-height: 1.25;
  }
  .afew-articles .afew-card:not(.afew-card--hero) .afew-card__meta {
    font-size: 0.72rem;
  }
  .afew-articles .afew-card:not(.afew-card--hero) .afew-card__excerpt {
    display: none;
  }
  .afew-articles .afew-card:not(.afew-card--hero) .afew-card__more {
    font-size: 0.78rem;
  }
}

/* Gallery layout: a stack of category/tag sections, each an .afew-articles grid. Used as an
   archive tool to surface articles across the site. */
.afew-gallery {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: min(1200px, 100%);
  margin: 0 auto;
}
.afew-gallery .afew-gallery-section {
  margin: 0;
}
@media (max-width: 600px) {
  .afew-gallery {
    gap: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .afew-articles .afew-card,
  .afew-articles .afew-card__imagelink img,
  .afew-articles .afew-card__more span[aria-hidden] {
    transition: none;
  }
  .afew-articles .afew-card:hover {
    transform: none;
  }
  .afew-articles .afew-card:hover .afew-card__imagelink img {
    transform: none;
  }
  .afew-articles .afew-carousel__track {
    scroll-behavior: auto;
  }
  .afew-articles .afew-carousel__nav {
    transition: none;
  }
}