/* ==========================================================================
   Portfolio Template - Core Stylesheet
   Design System: Modern, Premium, Accessible (targets WCAG AA/AAA contrast)

   HOW TO RESTYLE THIS TEMPLATE FOR A NEW PERSON/BRAND
   --------------------------------------------------------------------------
   Almost everything visual is driven by the CSS custom properties in the
   :root block directly below. To reskin the whole site to a new color
   palette and type system, you only need to change THIS block — every
   component (buttons, cards, header, footer, timeline, sliders) references
   these variables rather than hardcoded values.

     --color-primary    Main identity color. Used for headings, nav links,
                         borders, primary buttons, footer background.
                         Should be a color that reads as confident and
                         readable at both large (headline) and small
                         (button label) sizes — avoid low-contrast pastels.
     --color-pop         A brighter accent used sparingly for emphasis:
                         underline strokes under H2s, the header's bottom
                         border, hover states on primary buttons. Should
                         contrast strongly against --color-primary.
     --color-white       Page background / light surface color.
     --color-black       Body text color. Keep this near-black, not a
                         saturated color, for readability.
     --color-surface     A soft tint of --color-primary used for alternating
                         section backgrounds and subtle card fills.
     --color-secondary   A muted supporting color for secondary text,
                         italic helper copy, and outline-style filter chips.

   See STYLE-GUIDE.md in the project root for the full design rationale
   (why this layout uses cards + timelines + carousels, spacing scale,
   typography scale, and interaction patterns) — read that file before
   making structural changes, and read CONTENT-GUIDE.md before writing copy.
   ========================================================================== */

/* 1. Imports & Variables */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
  /* Color Palette — Lydia Simmonds brand (leaf/botanical, cream + green + pink) */
  --color-primary: #0E4003;
  --color-primary-rgb: 14, 64, 3;
  --color-pop: #E07188;
  --color-white: #FAF7F0;
  --color-black: #333333;
  --color-surface: #DEE1D4;
  --color-secondary: #B83D63;

  /* UI Tokens */
  --font-headings: 'Playfair Display', Georgia, serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --border-radius: 20px;
  --border-radius-sm: 10px;
  --border-width: 2px;
  --shadow-subtle: 0 8px 30px rgba(var(--color-primary-rgb), 0.06);
  --shadow-medium: 0 12px 40px rgba(var(--color-primary-rgb), 0.12);
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --max-width: 1200px;
}

/* 2. Resets & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  min-width: 320px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-white);
  color: var(--color-black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}

/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
}

h1 { font-size: 2.75rem; font-weight: 800; }
h2 { font-size: 2.25rem; position: relative; padding-bottom: 0.5rem; }
h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--color-pop);
  border-radius: 2px;
}

.text-center h2::after,
h2.text-center::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.text-center {
  text-align: center;
}
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  color: var(--color-black);
  text-align: left;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-primary);
  margin-bottom: 2rem;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-smooth);
}

a:hover {
  color: var(--color-secondary);
}

/* 4. Layout & Containers */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  position: relative;
  overflow: visible;
  padding: 5rem 0;
}

section > .container {
  position: relative;
  z-index: 1;
}

/* Decorative background texture: none by default. See "Plant Photo Accents"
   component below (section 4b) for the real botanical imagery used instead —
   applied deliberately per-section via .plant-accent, not automatically on
   every section like the old circuit-board pattern this replaced. */
section::before {
  content: none;
}

.section-alt {
  background-color: var(--color-surface);
}

/* 4b. Plant Photo Accents
   Real leaf cutouts (transparent PNG, background removed — see
   assets/images/plant-cutout-01.png) at full color and full opacity, the
   same way Lydia's original site uses them: crisp leaf silhouettes sitting
   directly on whatever color is behind them, not a faded/blurred photo
   rectangle. Placed deliberately in specific corners/seams rather than
   repeated on every section. Swap the source image any time by changing
   the <img src> in the HTML — no CSS changes needed as long as the class
   stays the same. */
.plant-accent {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  object-position: inherit;
  user-select: none;
}

.plant-accent--corner-br {
  right: 0;
  bottom: 0;
  width: min(26vw, 340px);
  height: auto;
  object-position: bottom right;
}

.plant-accent--corner-tl {
  left: 0;
  top: 0;
  width: min(24vw, 300px);
  height: auto;
  transform: scaleX(-1);
  object-position: top left;
}

.plant-accent--corner-tr {
  right: 0;
  top: 0;
  width: min(20vw, 260px);
  height: auto;
  object-position: top right;
}

@media (max-width: 768px) {
  .plant-accent--corner-tr {
    display: none;
  }
  .plant-accent--corner-br {
    width: 42vw;
  }
  .plant-accent--corner-tl {
    width: 38vw;
  }
}

/* Hero-only plant imagery — this is now the ONLY place plant imagery
   appears on the homepage. Sized and clipped to true corners so the leaves
   frame the hero rather than sprawling diagonally across the text zone;
   the hero text/photo (.hero-section .container, z-index: 1, plus the
   explicit z-index on .hero-text/.hero-visual below) always paints above
   these, but they're also kept physically clear of the copy so nothing
   ever reads as "covered." */
.plant-accent--corner-tl-large {
  left: 0;
  top: 0;
  width: min(30vw, 400px);
  height: auto;
  transform: rotate(180deg);
  object-position: top left;
}

.plant-accent--corner-br-large {
  right: 0;
  bottom: 0;
  width: min(30vw, 400px);
  height: auto;
  object-position: bottom right;
}

/* One gentle intermediate step, top-left only: the base min(30vw, 400px)
   stays flat near its 400px cap through most of the "shrinking desktop
   window" range and only really shrinks once the layout is close to
   stacking — this steps it down modestly (~10%) a bit earlier so it keeps
   retreating in tandem with the fluid text clearance above, instead of
   sitting large right up to the 992px cliff. Bottom-right leaf is
   untouched — it isn't near the text and doesn't need this. Bounded to
   not overlap the 768px/480px mobile steps below. */
@media (max-width: 1300px) and (min-width: 993px) {
  .plant-accent--corner-tl-large {
    width: min(27vw, 360px);
  }
}

@media (max-width: 768px) {
  .plant-accent--corner-tl-large,
  .plant-accent--corner-br-large {
    width: 32vw;
  }
}

@media (max-width: 480px) {
  .plant-accent--corner-tl-large,
  .plant-accent--corner-br-large {
    width: 26vw;
  }
}

/* Boundary-crossing leaves: placed as a direct child of the LOWER section
   (sibling to that section's .container) and pulled up with a negative
   top offset so they visually hang down from the section above, crossing
   the color-band seam as you scroll — this is the "leaves flow behind the
   next section" effect, not a leaf boxed inside one section. Requires
   `section { overflow: visible }` above; relies on normal DOM paint order
   (a later section paints over an earlier one) to sit on top of the
   section above while `section > .container { z-index: 1 }` keeps it
   behind that lower section's own text/cards. */
.plant-accent--boundary-left,
.plant-accent--boundary-right {
  top: -110px;
  width: min(22vw, 280px);
  height: auto;
}

.plant-accent--boundary-left {
  left: 0;
  transform: scaleX(-1);
}

.plant-accent--boundary-right {
  right: 0;
}

@media (max-width: 768px) {
  .plant-accent--boundary-left,
  .plant-accent--boundary-right {
    top: -60px;
    width: 40vw;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 992px) {
  .grid-2 { grid-template-columns: 1fr; gap: 2rem; }
  .grid-3 { grid-template-columns: 1fr; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
}

/* 4c. Hero Section
   Content is intentionally narrower than the site's normal 1200px
   container so it reads as centered/composed rather than stretched to
   the extreme edges — the enlarged plant corners (4b, above) live in the
   margin that frees up. Text and photo both sit in their own stacking
   context above the foliage (z-index: 2), on top of the general
   `section > .container { z-index: 1 }` rule, as a belt-and-braces
   guarantee that letters are never covered even where a leaf's bounding
   box happens to reach into the content area. */
.hero-section {
  padding-bottom: 4rem;
  overflow: visible;
}

.hero-section .container {
  max-width: 960px;
}

.hero-section .grid-2 {
  /* Top-anchored, not center-anchored: with center alignment, growing the
     text column (e.g. a taller button block) would recenter — and
     therefore silently shift — the shorter photo column. Anchoring both
     columns to the same top edge means the text can grow taller
     downward-only without ever moving the photo, greeting, or headline. */
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: 2.5rem;
}

@media (max-width: 992px) {
  .hero-section .grid-2 {
    grid-template-columns: 1fr;
  }
}

.hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 35rem;
  /* Fluid, not fixed: the top-left leaf (4b) scales with viewport width
     via min(30vw, 400px), so a fixed clearance drifts out of balance with
     it as the window narrows — comfortable at 1800px+, cramped by 1100px.
     This clamp tracks the same rate (~4vw) so the gap between leaf and
     text stays roughly proportional: 72px caps in above ~1800px (matches
     the previous fixed value at the desktop width this was approved on),
     tapers to ~40px by the 992px stacked-layout handoff, where the
     existing mobile override below takes over completely. */
  padding: 0 0 0 clamp(40px, 4vw, 72px);
}

.hero-greeting {
  font-family: var(--font-headings);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.4rem;
}

.hero-text h1 {
  font-size: 2.35rem;
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

.hero-signoff {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-black);
  margin-top: 0;
}

.hero-visual {
  position: relative;
  z-index: 2;
  align-self: start;
  max-width: 280px;
  margin-left: -30px;
}

.hero-visual img,
.photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius);
}

.hero-visual img {
  height: auto;
  max-height: 330px;
}

@media (max-width: 992px) {
  .hero-text {
    max-width: none;
    padding: 3rem 0 1rem;
  }
  .hero-visual {
    max-width: 100%;
    margin-left: 0;
  }
  .hero-visual img,
  .photo-placeholder { min-height: 320px; max-height: none; height: auto; }
}

@media (max-width: 576px) {
  .hero-text h1 { font-size: 2rem; }
}

@media (min-width: 993px) {
  /* The 2x2 button grid adds a second row versus the old single row;
     this padding keeps generous cream space below the buttons before the
     green divider. Scoped to desktop only — mobile keeps its existing
     4rem padding-bottom untouched since its button stack didn't change. */
  .hero-section {
    padding-bottom: 5rem;
  }
}

/* Hero button row: deliberate 2x2 grid — Browse Portfolio / Design
   Philosophy on row 1, About Me / Get in Touch on row 2. Every button
   shares one fixed width (below) sized to comfortably fit "Design
   Philosophy", the longest label — so all four buttons are identically
   sized rather than auto-sizing to their own text, and the two columns
   line up exactly. width: max-content on the group keeps it at its true
   content size rather than being stretched/compressed by the flex parent
   (.hero-text) it sits inside. On narrow screens this collapses to a
   single column. */
.btn-group.hero-btn-group {
  display: grid;
  grid-template-columns: repeat(2, auto);
  width: max-content;
  column-gap: 20px;
  row-gap: 18px;
  margin-top: 1.1rem;
}

/* 200px per Lydia's explicit request. At this width there isn't room for
   the site's standard 1.8rem horizontal padding and still fit "Design
   Philosophy" on one line, so horizontal padding is trimmed here instead
   of widening the button — vertical padding is untouched (still 0.8rem
   from the base .btn rule), so height/border-radius/hierarchy are
   unaffected. This is close to the minimum this label needs to avoid
   wrapping at 200px — flag it if it still wraps on your screen. */
.hero-btn-group .btn {
  width: 200px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media (max-width: 992px) {
  .btn-group.hero-btn-group {
    grid-template-columns: 1fr;
    width: auto;
  }
}

/* Placeholder used anywhere a real photo from Lydia hasn't landed yet —
   swap for a real <img> the moment the file is available. Intentionally
   visible/labeled rather than a broken image, per the no-fabrication rule. */
.photo-placeholder {
  background-color: var(--color-surface);
  border: 2px dashed var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--color-primary);
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
}

/* 4d. "What I Do" layered section — plant photo behind, content in front */
.what-i-do {
  position: relative;
  border-top: 3px solid var(--color-primary);
}

.what-i-do-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

.what-i-do-intro .photo-placeholder,
.what-i-do-intro img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  border: var(--border-width) solid var(--color-white);
}

@media (max-width: 992px) {
  .what-i-do-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .what-i-do-intro .photo-placeholder,
  .what-i-do-intro img {
    width: 240px;
    height: 240px;
  }
}

.what-i-do .grid-3 {
  position: relative;
  z-index: 1;
}

.what-i-do .project-card {
  background-color: rgba(250, 247, 240, 0.92);
  backdrop-filter: blur(2px);
}

/* Pink cards — text set to near-black rather than the default green/grey,
   because --color-primary (#0E4003) and --color-black (#333) both fall
   under WCAG AA's 4.5:1 body-text minimum against --color-pop (#E07188);
   #1A1A1A clears it at ~5.7:1. Headings pass either way (large bold text
   only needs 3:1) but kept consistent with the body copy for simplicity. */
.project-card--pop {
  background-color: var(--color-pop);
  border-color: var(--color-primary);
}

.project-card--pop h3,
.project-card--pop p {
  color: #1A1A1A;
}

/* Portfolio-category cards (What I Do → ILT/VILT, E-Learning, Job Aids,
   Case Study). Background PNGs are pre-built square leaf-corner frames
   (assets/images/1.png/2.png/3.png) with an inset rectangle baked in —
   text is centered and padded to sit inside that rectangle. Text color is
   set inline per card since it depends on which background is used:
   white on the two darker pinks (1.png #C94C71, 3.png #E07188, both pass
   3:1 large-text contrast), dark green on the light pink (2.png #F4C2C2,
   white fails contrast there at 1.57:1). */
.category-cards-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.category-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-smooth);
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-medium);
}

.category-card-label {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 11%;
  line-height: 1.3;
}

@media (max-width: 992px) {
  .category-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .category-cards-grid { grid-template-columns: 1fr; }
}

/* Full-bleed pink heading band — matches the pink title strips in Lydia's
   original site (Portfolio, What Do I Do?). Breaks out of the centered
   .container to true viewport width, then re-centers its own inner
   container so the heading text lines up with the content below it. */
.section-heading-band {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background-color: var(--color-pop);
  padding: 1.5rem 0;
  margin-top: -5rem;
  margin-bottom: 3rem;
  z-index: 1;
}

.section-heading-band h2 {
  margin: 0;
  color: var(--color-primary);
  padding-bottom: 0;
}

.section-heading-band h2::after {
  content: none;
}

/* 5. Navigation Header (Glassmorphic) */
header.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgba(253, 253, 253, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 4px solid var(--color-pop);
  z-index: 1000;
  transition: var(--transition-smooth);
}

header.site-header .nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88px;
  max-width: none;
  width: 100%;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

.logo a {
  font-family: var(--font-headings);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

nav.main-nav ul {
  display: flex;
  list-style: none;
  gap: 2.25rem;
}

nav.main-nav a {
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-black);
  padding: 0.5rem 0;
  position: relative;
}

nav.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: var(--transition-smooth);
}

nav.main-nav a:hover::after,
nav.main-nav a.active::after {
  width: 100%;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--color-primary);
}

/* 6. Buttons & Interactive Elements */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.8rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-family: var(--font-headings);
  transition: var(--transition-smooth);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.15);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-surface);
  transform: translateY(-2px);
}

.btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* 7. Portfolio Cards & Filter */
.filter-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.filter-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.filter-label {
  font-family: var(--font-headings);
  font-weight: 600;
  color: var(--color-primary);
  min-width: 100px;
  margin-top: 0.4rem;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-grow: 1;
}

.filter-btn {
  background-color: transparent;
  border: 1px solid var(--color-secondary);
  color: var(--color-black);
  padding: 0.4rem 1.2rem;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-btn:hover {
  background-color: var(--color-surface);
}

.filter-btn.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Project Cards */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.project-card {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-primary);
}

.card-image-col {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.75rem;
}

.card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.card-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.project-card:hover .card-image-wrapper img {
  scale: 1.05;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-primary-rgb), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-smooth);
}

.project-card:hover .card-overlay {
  opacity: 1;
}

.overlay-text {
  color: var(--color-white);
  font-family: var(--font-headings);
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--color-pop);
  border-radius: var(--border-radius);
}

.card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  min-width: 0;
}

.card-actions {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-left: 1px solid var(--color-surface);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 900px) {
  .project-card {
    flex-direction: column;
  }

  .card-image-col {
    width: 100%;
  }

  .card-actions {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--color-surface);
  }
}

.tag {
  background-color: #F9DCE1;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--border-radius-sm);
  text-transform: uppercase;
  display: inline-block;
}

.tag-link {
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tag-link:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.card-title {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.card-summary {
  font-size: 0.95rem;
  color: var(--color-black);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

/* 8. Case Study Layout Components */
.case-study-hero {
  background-color: var(--color-surface);
  padding: 5rem 0;
  border-bottom: none;
}

.recruiter-summary-card {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: 2.5rem;
  margin: 0;
  box-shadow: var(--shadow-medium);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 1.5rem 2rem;
}

@media (max-width: 768px) {
  .recruiter-summary-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2rem;
    padding: 1.5rem;
    margin-top: 0;
  }
}

.summary-col {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}

@media (max-width: 768px) {
  .summary-col {
    grid-row: auto;
    display: block;
  }
}

.summary-col h3 {
  font-size: 1.15rem;
  border-bottom: 2px solid var(--color-surface);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 0;
}

.summary-text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--color-black);
}

.summary-bullets {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-black);
}

/* CSS Scroll-Snap Slider and Controls */
.preview-slider-container {
  margin: 3rem 0;
}

.slider-title {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-helper {
  font-size: 0.85rem;
  color: var(--color-secondary);
  font-style: italic;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.css-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 46%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding: 0 10px;
  gap: 1.5rem;
  padding: 10px 10px 1.5rem 10px;
  margin: -10px -10px 0 -10px;
  width: calc(100% + 20px);
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
  .css-slider {
    grid-auto-columns: 75%;
  }
}

@media (max-width: 600px) {
  .css-slider {
    grid-auto-columns: 100%;
  }
}

@media (min-width: 993px) and (max-height: 720px) {
  .css-slider {
    grid-auto-columns: 31%;
  }
}

@media (min-width: 993px) and (max-height: 580px) {
  .css-slider {
    grid-auto-columns: 23%;
  }
}

@media (min-width: 601px) and (max-width: 992px) and (orientation: landscape) and (max-height: 500px) {
  .css-slider {
    grid-auto-columns: 45%;
  }
}

.css-slider::-webkit-scrollbar {
  height: 8px;
}
.css-slider::-webkit-scrollbar-track {
  background: var(--color-surface);
  border-radius: 4px;
}
.css-slider::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}

.slider-nav-btn {
  position: absolute;
  top: calc(50% - 13px);
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: var(--border-width) solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.2);
  font-weight: bold;
  font-size: 1.2rem;
}

.slider-nav-btn:hover {
  background-color: var(--color-pop);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn.prev-btn {
  left: -23px;
}

.slider-nav-btn.next-btn {
  right: -23px;
}

.slide-item {
  scroll-snap-align: start;
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  overflow: hidden;
  border: var(--border-width) solid var(--color-primary);
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.slide-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-primary);
}

.slide-media {
  aspect-ratio: 16 / 9;
  position: relative;
  width: 100%;
  background-color: #e0e0e0;
}

.slide-media img,
.slide-media svg,
.slide-media iframe,
.slide-media video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.slide-media img,
.slide-media svg {
  object-fit: contain;
}

.slide-media video {
  object-fit: cover;
}


.slide-caption {
  flex-grow: 1;
  padding: 1.25rem;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-surface);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: visible;
}

.slide-caption h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.slide-caption p {
  font-size: 1.05rem;
  margin-bottom: 0;
  color: var(--color-black);
}

.slide-caption ul {
  padding-left: 2.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
  list-style-type: disc;
}

.slide-caption li {
  font-size: 1.05rem;
  color: var(--color-black);
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.slide-caption li:last-child {
  margin-bottom: 0;
}

/* 9. About Me Visual Career Path */
.career-path-timeline {
  position: relative;
  max-width: 100%;
  margin: 4rem 0;
  padding-left: 2rem;
}

.career-path-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 7px;
  width: 4px;
  height: 100%;
  background-color: var(--color-primary);
  opacity: 0.2;
}

.timeline-node {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 2.5rem;
}

.timeline-node::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 4px solid var(--color-primary);
  z-index: 2;
  transition: var(--transition-smooth);
}

.timeline-node:hover::before {
  background-color: var(--color-pop);
  scale: 1.25;
}

.timeline-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-surface);
  box-shadow: var(--shadow-subtle);
  border-radius: var(--border-radius-sm);
  padding: 1.5rem;
  transition: var(--transition-smooth);
}

.timeline-card:hover {
  box-shadow: var(--shadow-medium);
  border-color: var(--color-primary);
}

.timeline-tag {
  color: var(--color-secondary);
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.timeline-title {
  color: var(--color-primary);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* 10. Contact Form Styling */
.contact-container {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form-card {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-subtle);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-family: var(--font-headings);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-control {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--border-radius-sm);
  border: 2px solid var(--color-surface);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-black);
  background-color: var(--color-white);
  transition: var(--transition-smooth);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.15);
}

textarea.form-control {
  resize: vertical;
  min-height: 150px;
}

/* 11. Footer */
footer.site-footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 3rem 0;
  border-top: 4px solid var(--color-pop);
}

footer.site-footer p {
  color: var(--color-surface);
  text-align: center;
  margin-bottom: 0.5rem;
}

footer.site-footer a {
  color: var(--color-pop);
}

footer.site-footer .footer-nav {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

footer.site-footer .footer-nav a {
  color: var(--color-white);
  font-size: 0.9rem;
  text-transform: uppercase;
}

footer.site-footer .footer-nav a:hover {
  color: var(--color-pop);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.1rem;
  transition: var(--transition-smooth);
}

.social-icon:hover {
  background-color: var(--color-pop);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Recruiter Card Metadata Row */
.recruiter-metadata-row {
  grid-column: span 3;
  border-top: 2px solid var(--color-surface);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.metadata-item {
  flex: 1 1 250px;
}
.metadata-label {
  font-family: var(--font-headings);
  font-weight: 700;
  color: var(--color-primary);
  display: block;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.metadata-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.metadata-tag {
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.tools-expander-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
}
.extra-tools-container {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* In-line Mini Slideshow for Card Previews */
.mini-slideshow-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background-color: var(--color-surface);
  overflow: hidden;
}
.mini-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-slide.active {
  opacity: 1;
}
.mini-slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(var(--color-primary-rgb), 0.7);
  color: var(--color-white);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 5;
  transition: var(--transition-smooth);
}
.mini-slide-btn:hover {
  background-color: var(--color-primary);
}
.mini-slide-prev { left: 8px; }
.mini-slide-next { right: 8px; }

/* Dual Action Card Buttons */
.card-actions-dual {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
  width: 100%;
}
.card-actions-dual .btn {
  flex: 1;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  white-space: nowrap;
}




@media (max-width: 768px) {
  .recruiter-metadata-row {
    grid-column: span 1;
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

@media (max-width: 480px) {
  .card-actions-dual {
    flex-direction: column;
  }
}

/* Featured Split Layout for Single Project Home Page */
.featured-split-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}

.featured-card-col {
  width: 100%;
}

.featured-summary-col {
  width: 100%;
}

@media (max-width: 992px) {
  .featured-split-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Back to Top Floating Button */
.back-to-top {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-medium);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  transform: translateY(10px);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--color-pop);
  color: var(--color-primary);
  transform: translateY(-3px);
}

.back-to-top svg {
  display: block;
}

/* 11b. Planning Artifacts — 3 compact static cards (replaces the carousel;
   all 3 documents visible at once, no prev/next confusion). */
.artifact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
}

.artifact-card {
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.artifact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.artifact-card-image {
  position: relative;
  width: 100%;
  padding-top: 85%;
  background-color: var(--color-surface);
}

.artifact-card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artifact-card-content {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}

.artifact-card-content h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.artifact-card-content p {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-black);
  margin-bottom: 1rem;
}

.artifact-card-content .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 0.78rem;
  padding: 0.55rem 0.8rem;
  margin-top: auto;
}

@media (max-width: 768px) {
  .artifact-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* 12. Bottom Project Navigation styling */
.project-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.project-nav-progress {
  font-family: var(--font-headings);
  font-weight: 600;
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .project-nav-container {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1rem;
  }

  .project-nav-progress {
    order: -1;
    margin-bottom: 0.5rem;
  }

  .project-nav-container .btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }
}

/* Google Slides Controls Overlays */
.slide-logo-redirect {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 30px;
  z-index: 5;
  background: transparent;
  cursor: pointer;
  display: block;
}

.slide-integrated-max-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 30px;
  z-index: 5;
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  opacity: 0.85;
}

.slide-integrated-max-btn:hover,
.slide-integrated-max-btn:focus {
  opacity: 1;
  transform: translateX(-50%) scale(1.03);
  outline: none;
}