/* ── HEADLINE BLOCK OVERRIDES ──────────────────────────────── */

.headline-block h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 91px;
  color: var(--gypsum);
}
.headline-block h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
}
.headline-block h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 35px;
}

/* ── SUBJECT TAG / STATUS TAG ────────────────────── */
.tag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   1. TITLE BLOCK
════════════════════════════════════════════════ */
.title-block {
  background: var(--dusty);
  padding: 120px 120px 48px;
  overflow: hidden;
}
.title-block-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: center;
}
.title-block-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.title-block-text .eyebrow { color: var(--eggplant); }
.title-block-text h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 91px;
  color: var(--blackberry);
}
.title-block-text h1 .lime  { color: var(--lime); }
.title-block-text h1 .pink  { color: var(--neon-pink); }
.title-block-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 27px;
  color: var(--blackberry);
}
.title-image-placeholder {
  width: 100%;
  aspect-ratio: 1;
  max-width: 400px;
  min-width: 300px;
  background: var(--rad-blue);
  border: 1px solid var(--blackberry);
  border-radius: 24px;
  justify-self: center;
}

/* ════════════════════════════════════════════════
   2. INTRO
════════════════════════════════════════════════ */
.intro-section {
  background: var(--dusty);
  padding: 72px 120px;
  overflow: hidden;
}
.intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.intro-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.intro-left h2 { color: var(--blackberry); }
.intro-left .accent-bar { background: var(--neon-pink); }
.intro-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--blackberry);
}
.intro-body p + p { margin-top: 16px; }

.intro-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.intro-right-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.intro-right-block .headline-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}
.intro-right-block .eyebrow { color: var(--eggplant); }
.intro-right-block h3 { color: var(--blackberry); }
.intro-right-block p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--blackberry);
}

/* Currently Into tag chips */
.currently-into-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.currently-into-block h3 { color: var(--blackberry); padding-bottom: 8px; }
.tag-chip-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tag-chip-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════
   3. SIDE QUESTS
════════════════════════════════════════════════ */
.side-quests-section {
  background: var(--navy);
  padding: 48px 120px 72px;
  overflow: hidden;
}
.side-quests-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.side-quests-header {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.side-quests-header .headline-block { padding: 16px 0; }
.side-quests-header .eyebrow { color: var(--banana); }
.side-quests-header h2 { color: var(--gypsum); }
.side-quests-header .accent-bar { background: var(--banana); }
.side-quests-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: var(--gypsum);
}
.side-quests-body p + p { margin-top: 12px; }

/* ─── CARD GRID (shared by Side Quests + Current Projects) ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Accent Line Card (Navy bg section) */
.card-accent {
  background: rgba(254, 254, 254, 0.25);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.card-accent .card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  color: var(--gypsum);
}
.card-accent .card-accent-line {
  height: 4px;
  width: 54px;
  border-radius: 0;
  flex-shrink: 0;
}
.card-accent .card-meta {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gypsum);
}
.card-accent .card-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: var(--gypsum);
}

/* ════════════════════════════════════════════════
   4. CURRENT PROJECTS
════════════════════════════════════════════════ */
.current-projects-section {
  background: var(--eggplant);
  padding: 48px 120px 72px;
  overflow: hidden;
}
.current-projects-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.current-projects-header {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.current-projects-header .eyebrow { color: var(--gypsum); }
.current-projects-header h2 { color: var(--gypsum); }
.current-projects-header .accent-bar { background: var(--neon-pink); }
.current-projects-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: var(--gypsum);
}

/* Solid Card (Eggplant section — Dusty bg) */
.card-solid {
  background: var(--dusty);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.card-solid .card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  color: var(--blackberry);
}
.card-solid .card-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: var(--blackberry);
  width: 100%;
}
/* Tags inside solid cards hug content, don't stretch */
.card-solid .tag-chip,
.card-solid .status-tag {
  align-self: flex-start;
}

/* ── UTILITY PAGE BUTTON OVERRIDES ──────────────────────── */
/* Remove border on hover + active for all .btn-outline buttons
   in the Toolbox (side-quests) and Testing Grounds (current-projects) sections.
   Also force all text (including inline-colored spans) to blackberry. */
.side-quests-section .btn-outline:hover,
.side-quests-section .btn-outline:active,
.current-projects-section .btn-outline:hover,
.current-projects-section .btn-outline:active {
  border-color: transparent !important;
  color: var(--blackberry) !important;
}
.side-quests-section .btn-outline:hover *,
.side-quests-section .btn-outline:active *,
.current-projects-section .btn-outline:hover *,
.current-projects-section .btn-outline:active * {
  color: var(--blackberry) !important;
}

/* ── IMAGE STRIP CAROUSEL ────────────────────────────────── */
.card-strip-wrap {
  width: 100%;
  overflow: hidden;
  margin-top: auto;
  cursor: grab;
  /* Disable selection on drag */
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* only allow vertical scrolling natively, drag horizontally handled by JS */
  /* Prevent flex-items from blowing out width of grid cells */
  min-width: 0;
}
.card-strip-wrap:active {
  cursor: grabbing;
}
.card-strip-track {
  display: flex;
  gap: 8px;
  width: max-content;
  will-change: transform;
}
.card-strip-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--dusty);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   5. CASE STUDY LINK SECTION
════════════════════════════════════════════════ */
.cs-link-section {
  background-color: var(--snowball);
  position: relative;
  overflow: hidden;
}
/* Noise overlay */
.cs-link-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.303' numOctaves='3' seed='5993' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
}
.cs-link-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 120px;
  display: flex;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cs-link-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cs-link-left .headline-block { padding: 16px 0; }
.cs-link-left h2 { color: var(--blackberry); }
.cs-link-left .accent-bar { background: var(--neon-pink); }
.cs-link-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--blackberry);
}
.cs-link-right {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1100px)
   Two-column → single column; cards: 3-up → 2-up
════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* Title block */
  .title-block                { padding: 100px 48px 48px; }
  .title-block-inner          { grid-template-columns: 1fr; gap: 40px; }
  .title-block-text h1        { font-size: 56px; line-height: 70px; }
  .title-image-placeholder    { width: clamp(300px, 50%, 400px); margin: 0 auto; }

  /* Intro */
  .intro-section              { padding: 64px 48px; }
  .intro-inner                { gap: 40px; }
  .intro-right                { grid-template-columns: repeat(2, 1fr); }

  /* Card grids: 3-up → 2-up */
  .card-grid                  { grid-template-columns: repeat(2, 1fr); }

  /* Side Quests + Current Projects padding */
  .side-quests-section        { padding: 48px 48px 64px; }
  .current-projects-section   { padding: 48px 48px 64px; }

  /* CS Link: stay 2-col but buttons stack */
  .cs-link-inner              { padding: 48px; }
  .cs-link-right              { flex-direction: column; align-items: center; padding: 0; gap: 12px; }
  .btn                        { width: 211px; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤699px)
   Single column everything; cards: 1-up, centered
════════════════════════════════════════════════ */
@media (max-width: 699px) {
  /* Title block */
  .title-block                { padding: 88px 24px 40px; }
  .title-block-text h1        { font-size: 40px; line-height: 52px; }
  .title-block-body           { font-size: 18px; line-height: 23px; }
  .title-image-placeholder    { width: clamp(300px, 80%, 400px); margin: 0 auto; }

  /* Intro */
  .intro-section              { padding: 48px 24px; }
  .intro-body                 { font-size: 18px; line-height: 22px; }
  .intro-right                { grid-template-columns: 1fr; gap: 32px; }

  /* Side Quests + Current Projects */
  .side-quests-section        { padding: 40px 24px 56px; }
  .current-projects-section   { padding: 40px 24px 56px; }

  /* Cards: single column, centered, constrained width */
  .card-grid                  { grid-template-columns: 1fr; gap: 24px; align-items: center; justify-items: center; }
  .card-accent,
  .card-solid                 { width: 100%; max-width: 400px; min-width: 300px; }

  /* H2 size bump-down */
  .headline-block h2          { font-size: 36px; line-height: 46px; }
  .headline-block h1          { font-size: 40px; line-height: 52px; }

  /* CS Link: full stack */
  .cs-link-inner              { flex-direction: column; padding: 40px 24px; gap: 32px; }
  .cs-link-body               { font-size: 17px; line-height: 22px; }
  .cs-link-right              { flex-direction: column; align-items: stretch; padding: 0; gap: 12px; width: 100%; }
  .btn                        { width: 100%; }

  .tag-chip-row               { flex-wrap: wrap; }
}