@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');

/* ============================================
   ILFORD inCOLOUR 2026 — meet-the-artists.css
   Meet The Artists page only

   NOTE: Caveat Brush is imported above rather than
   added to the ic-fonts request in functions.php.
   @import must stay on line 1 — any rule above it
   and the browser drops it silently.
   ============================================ */

/* ---------- Fredoka accents ---------- */
.ic-ahero__l1,
.ic-ahero__expect,
.ic-ahero__list span,
.ic-aband__text p {
  font-family: 'Fredoka', sans-serif !important;
}

/* ============================================
   HERO
   Full-bleed background photo + cream wash.
   Splats sit ABOVE the wash (z-index 2) or they
   would be washed out to nothing.
   ============================================ */
.ic-ahero {
  position: relative;
  padding: 84px 20px;
  overflow: hidden;
  background: var(--ic-cream) url('/wp-content/uploads/2026/07/meet-artists.jpg') center right / cover no-repeat;
}

.ic-ahero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(247,244,238,.97) 0%,
    rgba(247,244,238,.95) 42%,
    rgba(247,244,238,.6) 64%,
    rgba(247,244,238,0) 86%
  );
}

/* ---------- Paint decor ---------- */
.ic-ahero .ic-splat { z-index: 2; }

.ic-ahero__splat-1 {
  --splat-w: 240px; --splat-h: 240px;
  --splat-r: -22deg; --splat-o: .85;
  top: 90px; left: -80px;
}
.ic-ahero__splat-2 {
  --splat-w: 200px; --splat-h: 200px;
  --splat-r: 28deg; --splat-o: .8;
  bottom: -50px; left: 8%;
}

.ic-ahero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1320px;
}

/* ---------- Title ---------- */
.ic-ahero__title {
  color: var(--ic-navy) !important;
  line-height: .95;
  margin-bottom: 22px !important;
}

.ic-ahero__l1,
.ic-ahero__l2 { display: block; color: var(--ic-navy); }

.ic-ahero__l1 {
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  letter-spacing: -.5px;
  text-transform: uppercase;
}

/* Caveat Brush ships at 400 only — asking for 700
   makes the browser synthesise a fake bold and the
   strokes smear. */
.ic-ahero__l2 {
  position: relative;
  font-family: 'Caveat Brush', cursive !important;
  font-weight: 400;
  font-size: clamp(3.6rem, 9vw, 6.8rem);
  line-height: 1;
  letter-spacing: 1px;
  padding-bottom: 20px;
}

.ic-ahero__l2::after {
  content: '';
  position: absolute;
  left: 6px;
  bottom: 2px;
  width: min(400px, 78%);
  height: 7px;
  border-radius: 6px;
  background: var(--ic-teal);
  transform: rotate(-1.2deg);
}

/* ---------- Intro ---------- */
.ic-ahero__intro {
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 600;
  color: var(--ic-navy);
  max-width: 440px;
  margin-bottom: 34px !important;
}

/* ---------- Expect list ----------
   Red, not the mockup's yellow — yellow on cream is
   about 1.6:1 and effectively unreadable. */
.ic-ahero__expect {
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ic-red) !important;
  margin-bottom: 18px !important;
}

.ic-ahero__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 18px 30px;
  margin-bottom: 0 !important;
}

.ic-ahero__list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.ic-ahero__list svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-top: 1px;
}
.ic-ahero__list li:nth-child(1) svg { stroke: var(--ic-red); }
.ic-ahero__list li:nth-child(2) svg { stroke: var(--ic-orange); }
.ic-ahero__list li:nth-child(3) svg { stroke: var(--ic-green); }
.ic-ahero__list li:nth-child(4) svg { stroke: var(--ic-purple); }

.ic-ahero__list span {
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ic-navy);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ic-ahero { padding-top: 70px; }
  .ic-ahero__splat-1 { --splat-w: 170px; --splat-h: 170px; top: 70px; left: -75px; }
  .ic-ahero__splat-2 { --splat-w: 150px; --splat-h: 150px; }
}

@media (max-width: 768px) {
  .ic-ahero {
    padding: 62px 20px 60px;
    background-position: 70% center;
  }
  .ic-ahero::before {
    background: linear-gradient(
      160deg,
      rgba(247,244,238,.97) 0%,
      rgba(247,244,238,.92) 58%,
      rgba(247,244,238,.8) 100%
    );
  }
  .ic-ahero__intro { max-width: 100%; }
  .ic-ahero__list { grid-template-columns: 1fr; gap: 14px; }
  .ic-ahero__splat-2 { display: none; }
}

@media (max-width: 520px) {
  .ic-ahero { padding-top: 52px; }
  .ic-ahero__l2 { padding-bottom: 14px; }
  .ic-ahero__l2::after { width: 84%; height: 5px; }
  .ic-ahero__splat-1 { --splat-w: 125px; --splat-h: 125px; --splat-o: .7; top: 58px; left: -70px; }
}

/* ============================================
   ARTIST GRID  (banner-only cards)
   ============================================ */

.ic-agrid__title {
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem) !important;
  letter-spacing: 1px;
  color: var(--ic-navy) !important;
  margin-bottom: 44px !important;
}

.ic-agrid {
  position: relative;
  background: var(--ic-cream);
  padding: 118px 20px 90px;
  overflow: hidden;
}

.ic-agrid .ic-wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

.ic-agrid__cta { text-align: center; }
.ic-agrid__more { cursor: pointer; }

/* "stay tuned" note — kept in case the markup still
   uses it anywhere; the View More button replaces it. */
.ic-agrid__soon {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ic-navy);
  margin: 0;
}

/* ---------- Paint decor ---------- */
.ic-agrid__splat-1 {
  --splat-w: 280px; --splat-h: 280px;
  --splat-r: -22deg; --splat-o: .8;
  top: 160px; left: -90px;
}
.ic-agrid__splat-2 {
  --splat-w: 250px; --splat-h: 250px;
  --splat-r: 30deg; --splat-o: .75;
  top: 42%; right: -85px;
}
.ic-agrid__splat-3 {
  --splat-w: 230px; --splat-h: 230px;
  --splat-r: -34deg; --splat-o: .75;
  bottom: 18%; left: -80px;
}
.ic-agrid__splat-4 {
  --splat-w: 260px; --splat-h: 260px;
  --splat-r: 16deg; --splat-o: .8;
  bottom: -60px; right: -75px;
}

/* ---------- Grid ----------
   align-items:start so a shorter banner in a row
   doesn't stretch to match a taller neighbour. */
.ic-agrid__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 46px !important;
}

.ic-agrid__item.is-hidden { display: none; }

/* ---------- Collapsed state — first 3 rows only ----------
   The cut-off has to track the column count, or "3 rows"
   silently becomes 6 rows on tablet and 12 on mobile.
   Each number is (columns × 3) + 1 at that breakpoint.
   Toggled by the #ic-artist-more button. */
.ic-agrid__list.is-collapsed .ic-agrid__item:nth-child(n+13) { display: none; }   /* 4 cols */

@media (max-width: 1100px) {
  .ic-agrid__list.is-collapsed .ic-agrid__item:nth-child(n+10) { display: none; } /* 3 cols */
}
@media (max-width: 768px) {
  .ic-agrid__list.is-collapsed .ic-agrid__item:nth-child(n+7)  { display: none; } /* 2 cols */
}
@media (max-width: 420px) {
  .ic-agrid__list.is-collapsed .ic-agrid__item:nth-child(n+4)  { display: none; } /* 1 col  */
}

.ic-agrid__card {
  display: block;
  height: auto;
  background: #fff;
  border-radius: var(--ic-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ic-agrid__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0,0,0,.15);
}

/* ---------- Media + number badge ----------
   No fixed aspect-ratio — the banner sets its own
   height so the full image shows, uncropped. */
.ic-agrid__media {
  position: relative;
  overflow: hidden;
}
.ic-agrid__media img {
  width: 100%;
  height: auto;
  display: block;
}

.ic-agrid__num {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.18rem;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---------- Number-badge colour cycle ----------
   Static grid, so nth-child is safe here — nothing
   clones these the way Splide clones slides. */
.ic-agrid__item:nth-child(6n+1) .ic-agrid__num { background-image: url('/wp-content/uploads/2026/07/s3.png'); }
.ic-agrid__item:nth-child(6n+2) .ic-agrid__num { background-image: url('/wp-content/uploads/2026/07/s6.png'); }
.ic-agrid__item:nth-child(6n+3) .ic-agrid__num { background-image: url('/wp-content/uploads/2026/07/s4.png'); }
.ic-agrid__item:nth-child(6n+4) .ic-agrid__num { background-image: url('/wp-content/uploads/2026/07/s5.png'); }
.ic-agrid__item:nth-child(6n+5) .ic-agrid__num { background-image: url('/wp-content/uploads/2026/07/s2.png'); }

/* yellow splat takes navy text — white would vanish */
.ic-agrid__item:nth-child(6n+6) .ic-agrid__num {
  background-image: url('/wp-content/uploads/2026/07/s1.png');
  color: var(--ic-navy);
}

/* ---------- Hover / focus bio reveal ----------
   Bios live in the HTML (crawlable). This panel fades
   them in over the banner on hover or keyboard focus;
   longer bios scroll inside the panel. It sits above
   the number badge (z-index 3), so the badge is hidden
   while a bio is showing. */
.ic-agrid__media:focus { outline: none; }
.ic-agrid__media:focus-visible {
  outline: 3px solid var(--ic-teal);
  outline-offset: -3px;
}

.ic-agrid__bio {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  color: #fff;
  background: rgba(11, 7, 50, .94);   /* brand navy, near-solid for readability */
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ic-agrid__card:hover .ic-agrid__bio,
.ic-agrid__card:focus-within .ic-agrid__bio {
  opacity: 1;
  visibility: visible;
}

.ic-agrid__bio-name {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--ic-yellow) !important;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 !important;
}

.ic-agrid__bio-text {
  font-size: .82rem;
  line-height: 1.55;
  margin: 0 !important;
}

.ic-agrid__bio::-webkit-scrollbar { width: 6px; }
.ic-agrid__bio::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .3);
  border-radius: 6px;
}

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

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ic-agrid__list { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .ic-agrid__splat-1 { --splat-w: 200px; --splat-h: 200px; left: -85px; }
  .ic-agrid__splat-2 { --splat-w: 180px; --splat-h: 180px; right: -80px; }
  .ic-agrid__splat-3 { --splat-w: 170px; --splat-h: 170px; left: -78px; }
  .ic-agrid__splat-4 { --splat-w: 190px; --splat-h: 190px; right: -72px; }
}

@media (max-width: 900px) {
  .ic-agrid { padding-top: 96px; }
  .ic-agrid__splat-1 { top: 120px; }
}

@media (max-width: 768px) {
  .ic-agrid { padding: 88px 20px 62px; }
  .ic-agrid__list { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .ic-agrid__num { width: 62px; height: 62px; font-size: 1rem; }
  .ic-agrid__title { margin-bottom: 30px !important; }
  .ic-agrid__splat-1 { --splat-w: 150px; --splat-h: 150px; --splat-o: .7; left: -80px; }
  .ic-agrid__splat-2 { --splat-w: 135px; --splat-h: 135px; --splat-o: .7; right: -75px; }
  .ic-agrid__splat-3 { --splat-w: 130px; --splat-h: 130px; --splat-o: .7; left: -72px; }
  .ic-agrid__splat-4 { --splat-w: 140px; --splat-h: 140px; --splat-o: .7; right: -70px; }
}

@media (max-width: 520px) {
  .ic-agrid { padding-top: 70px; }
  .ic-agrid__cta .ic-btn { width: 100%; }
}

@media (max-width: 420px) {
  .ic-agrid__list { grid-template-columns: 1fr; }
}

/* ============================================
   COME MEET OUR ARTISTS — closing banner
   ============================================ */
.ic-aband {
  position: relative;
  background: var(--ic-navy);
  color: #fff;
  padding: 34px 20px 38px;
  overflow: hidden;
}

/* ---------- Paint decor ---------- */
.ic-aband .ic-splat { z-index: 0; }

.ic-aband__splat-1 {
  --splat-w: 220px; --splat-h: 220px;
  --splat-r: 22deg; --splat-o: .9;
  top: -70px; right: 14%;
}
.ic-aband__splat-2 {
  --splat-w: 200px; --splat-h: 200px;
  --splat-r: -28deg; --splat-o: .9;
  bottom: -70px; left: -60px;
}

.ic-aband__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 1240px;
}

/* ---------- Spray can ---------- */

.ic-aband__icon {
  width: 82px;
  height: 82px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ic-yellow);
  color: var(--ic-navy);
}
.ic-aband__icon svg { width: 42px; height: 42px; display: block; }

/* ---------- Text ---------- */
.ic-aband__text { flex: 1; }

.ic-aband__title {
  font-family: 'Caveat Brush', cursive !important;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem) !important;
  line-height: 1.1;
  letter-spacing: .5px;
  text-transform: none;
  color: var(--ic-yellow) !important;
  margin-bottom: 4px !important;
}

.ic-aband__text p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0 !important;
}
.ic-aband__text b { font-weight: 700; }

/* ---------- Social ---------- */
.ic-aband__social {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  margin-bottom: 0 !important;
}

.ic-aband__social a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  transition: background .2s, color .2s, transform .2s;
}
.ic-aband__social a:hover {
  background: #fff;
  color: var(--ic-navy);
  transform: translateY(-3px);
}
.ic-aband__social svg { width: 24px; height: 24px; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ic-aband { padding: 30px 20px 34px; }
  .ic-aband__inner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 16px;
  }
  .ic-aband__icon { flex: 1 0 100%; justify-content: center; background: none; color: var(--ic-yellow); }
  .ic-aband__icon svg { width: 46px; height: 46px; }
  .ic-aband__text { flex: 1 0 100%; }
  .ic-aband__social { flex: 1 0 100%; justify-content: center; }
  .ic-aband__splat-1 { --splat-w: 150px; --splat-h: 150px; right: 6%; }
  .ic-aband__splat-2 { --splat-w: 140px; --splat-h: 140px; left: -55px; }
}

@media (max-width: 480px) {
  .ic-aband__text p { font-size: .9rem; }
  .ic-aband__social a { width: 44px; height: 44px; }
  .ic-aband__social svg { width: 21px; height: 21px; }
}