/*
 * ══════════════════════════════════════════════════════════
 *  PUBLIC.CSS — Annie Nidzieko Teaching Portfolio
 * ══════════════════════════════════════════════════════════
 *
 *  All component, layout, animation, and responsive styles.
 *  Relies on CSS custom properties defined in branding.css.
 *
 *  Table of Contents:
 *    1.  Reset & Base
 *    2.  Utilities
 *    3.  Navigation
 *    4.  Hero
 *    5.  About
 *    6.  Philosophy
 *    7.  Experience
 *    8.  Gallery Strip
 *    9.  Strengths
 *    10. Credentials
 *    11. Materials
 *    12. Resume / Docs
 *    13. Community
 *    14. Contact
 *    15. Footer
 *    16. Scroll Animations
 *    17. Responsive
 *
 * ══════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════
   1. RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: var(--ff-body); background: var(--bg); color: var(--text); line-height: 1.7; overflow-x: hidden; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }


/* ══════════════════════════════════════
   2. UTILITIES
══════════════════════════════════════ */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Section type */
.label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 12px;
}
.section-sub {
  font-family: var(--ff-display);
  font-size: clamp(.95rem, 1.8vw, 1.2rem);
  font-style: italic;
  color: var(--text-mid);
  margin-bottom: 52px;
}
.centered { text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 100px;
  font-family: var(--ff-body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  border: none;
  transition: all var(--ease);
}
.btn-sm { padding: 8px 18px; font-size: .8rem; }

.btn-primary  { background: var(--sage); color: var(--white); box-shadow: 0 4px 18px rgba(107,143,111,.35); }
.btn-primary:hover  { background: var(--sage-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(107,143,111,.45); }

.btn-outline  { background: transparent; color: var(--text); border: 2px solid var(--sand); }
.btn-outline:hover  { border-color: var(--sage); color: var(--sage); transform: translateY(-2px); }

.btn-coral    { background: transparent; color: var(--coral); border: 2px solid var(--coral); }
.btn-coral:hover    { background: var(--coral); color: var(--white); transform: translateY(-2px); }

.btn-blue     { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn-blue:hover     { background: var(--blue); color: var(--white); transform: translateY(-2px); }


/* ══════════════════════════════════════
   3. NAVIGATION
══════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--ease), box-shadow var(--ease);
}
.nav.scrolled {
  background: rgba(253, 250, 246, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(107, 143, 111, .18);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.nav__logo {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  margin-right:32px;
}
.nav__logo em { color: var(--sage); font-style: normal; }

.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--text-mid);
  transition: color var(--ease);
}
.nav__links a:hover { color: var(--sage); }
.nav__links .nav-cta {
  background: var(--sage);
  color: var(--white) !important;
  padding: 7px 20px;
  border-radius: 100px;
  transition: background var(--ease) !important;
}
.nav__links .nav-cta:hover { background: var(--sage-dark) !important; }

/* Hamburger */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--ease);
}

/* Mobile overlay */
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 850;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.nav__overlay.open { display: flex; }
.nav__overlay a {
  font-family: var(--ff-display);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--text);
  transition: color var(--ease);
}
.nav__overlay a:hover { color: var(--sage); }
.nav__close {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--text);
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--ease);
}
.nav__close:hover { background: var(--sand); }


/* ══════════════════════════════════════
   4. HERO
══════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Molecular SVG dot pattern */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%236B8F6F' stroke-width='0.8' opacity='0.25'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Ccircle cx='50' cy='8' r='2.5'/%3E%3Ccircle cx='88' cy='12' r='2.5'/%3E%3Ccircle cx='30' cy='40' r='2.5'/%3E%3Ccircle cx='70' cy='38' r='2.5'/%3E%3Ccircle cx='15' cy='68' r='2.5'/%3E%3Ccircle cx='50' cy='72' r='2.5'/%3E%3Ccircle cx='85' cy='65' r='2.5'/%3E%3Ccircle cx='50' cy='50' r='3'/%3E%3Cline x1='12' y1='12' x2='50' y2='8'/%3E%3Cline x1='50' y1='8' x2='88' y2='12'/%3E%3Cline x1='12' y1='12' x2='30' y2='40'/%3E%3Cline x1='50' y1='8' x2='50' y2='50'/%3E%3Cline x1='88' y1='12' x2='70' y2='38'/%3E%3Cline x1='30' y1='40' x2='50' y2='50'/%3E%3Cline x1='70' y1='38' x2='50' y2='50'/%3E%3Cline x1='30' y1='40' x2='15' y2='68'/%3E%3Cline x1='50' y1='50' x2='50' y2='72'/%3E%3Cline x1='70' y1='38' x2='85' y2='65'/%3E%3Cline x1='15' y1='68' x2='50' y2='72'/%3E%3Cline x1='50' y1='72' x2='85' y2='65'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
}

/* Organic color blob (right side) */
.hero::after {
  content: '';
  position: absolute;
  right: -10vw;
  top: 50%;
  transform: translateY(-50%);
  width: 55vw; height: 55vw;
  max-width: 700px; max-height: 700px;
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
  background: linear-gradient(135deg, rgba(196,219,202,.35) 0%, rgba(180,212,220,.25) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding: clamp(60px, 8vw, 100px) 0;
}

/* Tag pill */
.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-sage);
  border: 1px solid var(--sage-light);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 24px;
}
.hero__tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

.hero__name {
  font-family: var(--ff-display);
  font-size: clamp(3.2rem, 7vw, 5.8rem);
  font-weight: 300;
  line-height: 1.0;
  color: var(--text);
  margin-bottom: 6px;
}
.hero__name em { font-style: italic; color: var(--sage); }

.hero__creds {
  font-size: clamp(.75rem, 1.3vw, .88rem);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 32px;
}

.hero__quote {
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  color: var(--text-mid);
  line-height: 1.85;
  border-left: 3px solid var(--sage-light);
  padding-left: 20px;
  margin-bottom: 44px;
  max-width: 500px;
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Photo column */
.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__frame  { position: relative; width: min(400px, 90%); }

.hero__frame::before {
  content: '';
  position: absolute;
  width: 82%; height: 82%;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  background: linear-gradient(135deg, var(--sage-light), var(--blue-light));
  top: -28px; right: -28px;
  z-index: 0;
  opacity: .7;
}
.hero__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 45% 55% 60% 40% / 40% 50% 50% 60%;
  object-fit: cover;
  object-position: center top;
  aspect-ratio: 3 / 4;
  box-shadow: var(--sh-lg);
}

/* Floating badges */
.hero__badge {
  position: absolute;
  z-index: 2;
  background: var(--white);
  border-radius: var(--r);
  padding: 12px 16px;
  box-shadow: var(--sh-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__badge--left  { bottom: 48px; left: -24px;  border-left: 4px solid var(--coral); }
.hero__badge--right { top: 48px;    right: -24px; border-left: 4px solid var(--blue);  }

.badge-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.badge-icon.coral { background: var(--coral-light); }
.badge-icon.blue  { background: var(--bg-blue); }

.badge-text strong { display: block; font-size: .84rem; font-weight: 700; color: var(--text); }
.badge-text span   { font-size: .72rem; color: var(--text-light); }

/* Scroll hint */
.hero__scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-light);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: scrollBounce 2.2s ease-in-out infinite;
}
.scroll-arrow { font-size: 1.1rem; }

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ══════════════════════════════════════
   5. ABOUT
══════════════════════════════════════ */
.about { padding: var(--pad-section) 0; background: var(--bg); }
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}

/* Photos */
.about__photos { position: relative; }
.about__main {
  width: 100%;
  border-radius: var(--r-lg);
  object-fit: cover;
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-md);
}
.about__secondary {
  position: absolute;
  bottom: -36px; right: -36px;
  width: 52%;
  border-radius: var(--r);
  object-fit: cover;
  aspect-ratio: 1;
  box-shadow: var(--sh-lg);
  border: 5px solid var(--bg);
}
.about__orb {
  position: absolute;
  top: -20px; left: -20px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(196,219,202,.6), rgba(180,212,220,.4));
  z-index: -1;
}

/* Content */
.about__content { padding-bottom: 40px; }
.about__text { font-size: 1.04rem; color: var(--text-mid); line-height: 1.88; margin-bottom: 20px; }

/* Stats row */
.about__stats { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.about__stat  {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 20px 16px;
  background: var(--bg-sage);
  border-radius: var(--r);
}
.stat-num {
  font-family: var(--ff-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-light);
}


/* ══════════════════════════════════════
   6. PHILOSOPHY
══════════════════════════════════════ */
.philosophy {
  padding: var(--pad-section) 0;
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.philosophy__decor {
  position: absolute;
  right: -80px; bottom: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,219,202,.25) 0%, transparent 70%);
  pointer-events: none;
}
.philosophy__decor2 {
  position: absolute;
  left: -60px; top: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,212,220,.2) 0%, transparent 70%);
  pointer-events: none;
}

.philosophy__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.phil-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  box-shadow: var(--sh-sm);
  transition: transform var(--ease), box-shadow var(--ease);
  border-bottom: 4px solid transparent;
}
.phil-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }

.phil-card:nth-child(1) { border-bottom-color: var(--coral); }
.phil-card:nth-child(2) { border-bottom-color: var(--sage);  }
.phil-card:nth-child(3) { border-bottom-color: var(--blue);  }
.phil-card:nth-child(4) { border-bottom-color: var(--gold);  }
.phil-card:nth-child(5) { border-bottom-color: var(--coral); }
.phil-card:nth-child(6) { border-bottom-color: var(--sage);  }

.phil-icon {
  width: 56px; height: 56px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.phil-card:nth-child(1) .phil-icon { background: #FAE9E4; }
.phil-card:nth-child(2) .phil-icon { background: var(--bg-sage); }
.phil-card:nth-child(3) .phil-icon { background: var(--bg-blue); }
.phil-card:nth-child(4) .phil-icon { background: #FBF3E5; }
.phil-card:nth-child(5) .phil-icon { background: #FAE9E4; }
.phil-card:nth-child(6) .phil-icon { background: var(--bg-sage); }

.phil-title {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.phil-text { font-size: .96rem; color: var(--text-mid); line-height: 1.78; }


/* ══════════════════════════════════════
   7. EXPERIENCE
══════════════════════════════════════ */
.experience { padding: var(--pad-section) 0; background: var(--bg); }
.experience__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.experience__aside { position: sticky; top: calc(var(--nav-h) + 28px); }
.experience__aside-img {
  width: 100%;
  border-radius: var(--r-lg);
  object-fit: cover;
  aspect-ratio: 3 / 4;
  box-shadow: var(--sh-md);
  margin-top: 28px;
}
.experience__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-sage);
  border-radius: var(--r);
  padding: 12px 18px;
  margin-top: 24px;
  font-size: .9rem;
  color: var(--sage-dark);
}
.experience__badge span { font-weight: 700; }

/* Timeline */
.timeline { display: flex; flex-direction: column; }

.tl-item {
  position: relative;
  padding-left: 52px;
  padding-bottom: 44px;
}
.tl-item:last-child { padding-bottom: 0; }

.tl-item::before {
  content: '';
  position: absolute;
  left: 15px; top: 24px; bottom: 0;
  width: 2px;
  background: var(--sand);
}
.tl-item:last-child::before { display: none; }

.tl-dot {
  position: absolute;
  left: 0; top: 4px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.tl-dot::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sage);
}

.tl-role { font-family: var(--ff-display); font-size: 1.28rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.tl-org  { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; }
.tl-desc { font-size: .96rem; color: var(--text-mid); line-height: 1.76; }


/* ══════════════════════════════════════
   8. GALLERY STRIP
══════════════════════════════════════ */
.gallery { overflow: hidden; padding: 36px 0; background: var(--bg-alt); }
.gallery__track {
  display: flex;
  gap: 14px;
  animation: scrollGallery 35s linear infinite;
}
.gallery__track:hover { animation-play-state: paused; }
.gallery__img {
  width: 260px;
  min-width: 260px;
  height: 190px;
  object-fit: cover;
  border-radius: var(--r);
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
}
@keyframes scrollGallery {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ══════════════════════════════════════
   9. STRENGTHS
══════════════════════════════════════ */
.strengths { padding: var(--pad-section) 0; background: var(--bg-sage); }
.strengths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 20px;
}

.str-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: var(--sh-sm);
  transition: transform var(--ease), box-shadow var(--ease);
}
.str-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }

.str-icon {
  width: 52px; height: 52px;
  min-width: 52px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.str-icon.sage  { background: var(--bg-sage); }
.str-icon.blue  { background: var(--bg-blue); }
.str-icon.coral { background: #FAE9E4; }
.str-icon.gold  { background: #FBF3E5; }

.str-title { font-family: var(--ff-display); font-size: 1.18rem; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.str-desc  { font-size: .93rem; color: var(--text-mid); line-height: 1.72; }


/* ══════════════════════════════════════
   10. CREDENTIALS
══════════════════════════════════════ */
.credentials { padding: var(--pad-section) 0; background: var(--bg); }
.credentials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.cred-group {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  box-shadow: var(--sh-sm);
  border-top: 4px solid var(--sage);
}
.cred-group:nth-child(2) { border-top-color: var(--blue);  }
.cred-group:nth-child(3) { border-top-color: var(--coral); }

.cred-group-title {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cred-group-title .title-icon { font-size: 1.3rem; }

.cred-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--sand);
}
.cred-item:last-child { border-bottom: none; padding-bottom: 0; }

.cred-dot {
  width: 8px; height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--sage);
  margin-top: 8px;
}
.cred-group:nth-child(2) .cred-dot { background: var(--blue);  }
.cred-group:nth-child(3) .cred-dot { background: var(--coral); }

.cred-name { font-weight: 700; font-size: .94rem; color: var(--text); margin-bottom: 2px; }
.cred-sub  { font-size: .85rem; color: var(--text-light); line-height: 1.5; }


/* ══════════════════════════════════════
   11. MATERIALS
══════════════════════════════════════ */
.materials { padding: var(--pad-section) 0; background: var(--bg-alt); }
.materials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.mat-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--ease), box-shadow var(--ease);
}
.mat-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }

.mat-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.mat-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
}
.mat-thumb-placeholder.ela     { background: linear-gradient(135deg, #d4e6d0, #b8d4c0); }
.mat-thumb-placeholder.math    { background: linear-gradient(135deg, #c8dee8, #b0c8d8); }
.mat-thumb-placeholder.science { background: linear-gradient(135deg, #e4d8b0, #d8c89c); }

.mat-body  { padding: 26px 24px; }
.mat-type  { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 7px; }
.mat-type.ela     { color: var(--sage);  }
.mat-type.math    { color: var(--blue);  }
.mat-type.science { color: var(--gold);  }

.mat-title { font-family: var(--ff-display); font-size: 1.28rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.mat-desc  { font-size: .92rem; color: var(--text-mid); line-height: 1.68; margin-bottom: 20px; }
.mat-actions { display: flex; gap: 10px; }


/* ══════════════════════════════════════
   12. RESUME / DOCS
══════════════════════════════════════ */
.resume-section {
  padding: var(--pad-section) 0;
  background: var(--text);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.resume-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: rgba(107, 143, 111, .15);
  pointer-events: none;
}
.resume-section::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: rgba(91, 154, 168, .15);
  pointer-events: none;
}

.resume-section .label         { color: var(--sage-light); }
.resume-section .section-title { color: var(--white); }
.resume-section .section-sub   { color: rgba(255, 255, 255, .55); }

.docs-grid {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.doc-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(8px);
  transition: all var(--ease);
  min-width: 240px;
}
.doc-card:hover { background: rgba(255, 255, 255, .14); transform: translateY(-4px); }

.doc-icon {
  width: 48px; height: 48px;
  border-radius: var(--r);
  background: rgba(107, 143, 111, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.doc-info strong { display: block; font-size: .94rem; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.doc-info span   { font-size: .8rem; color: rgba(255, 255, 255, .45); }

.doc-arrow {
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: background var(--ease);
}
.doc-card:hover .doc-arrow { background: var(--sage); }

.docs-note {
  text-align: center;
  margin-top: 28px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .38);
  font-style: italic;
  position: relative;
  z-index: 1;
}


/* ══════════════════════════════════════
   13. COMMUNITY
══════════════════════════════════════ */
.community { padding: var(--pad-section) 0; background: var(--bg); }
.community__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.community__quote-block {
  font-family: var(--ff-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.52;
  color: var(--text);
  padding: 28px 28px 28px 32px;
  border-left: 4px solid var(--coral);
  background: var(--bg-alt);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  margin-bottom: 28px;
}
.community__text { font-size: 1.02rem; color: var(--text-mid); line-height: 1.82; margin-bottom: 16px; }

.community__photo-wrap { position: relative; }
.community__img {
  width: 100%;
  border-radius: var(--r-lg);
  object-fit: cover;
  aspect-ratio: 3 / 4;
  box-shadow: var(--sh-md);
}
.community__orb {
  position: absolute;
  bottom: -24px; right: -24px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage-light), var(--blue-light));
  z-index: -1;
  opacity: .6;
}


/* ══════════════════════════════════════
   14. CONTACT
══════════════════════════════════════ */
.contact { padding: var(--pad-section) 0; background: var(--bg); }
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact__text { font-size: 1.03rem; color: var(--text-mid); line-height: 1.82; margin-bottom: 36px; }
.contact__info { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }

.contact-row { display: flex; align-items: center; gap: 14px; }
.contact-icon {
  width: 44px; height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--bg-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.contact-detail strong {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 1px;
}
.contact-detail a,
.contact-detail span { font-size: .98rem; color: var(--text); transition: color var(--ease); }
.contact-detail a:hover { color: var(--sage); }

.contact__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Contact info card */
.contact__card {
  background: var(--bg-sage);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  text-align: center;
}
.contact-card-title { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.contact-card-sub   { font-size: .9rem; color: var(--text-light); margin-bottom: 28px; }

.avail-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  padding: 10px 20px;
  border-radius: 100px;
  margin-bottom: 28px;
  box-shadow: var(--sh-sm);
}
.avail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4caf50;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(1.4); }
}
.avail-text { font-size: .88rem; font-weight: 600; color: var(--text); }

.contact-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.contact-tag  {
  padding: 6px 16px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--white);
  color: var(--text-mid);
  box-shadow: var(--sh-sm);
}


/* ══════════════════════════════════════
   15. FOOTER
══════════════════════════════════════ */
.footer {
  background: var(--text);
  color: rgba(255, 255, 255, .4);
  padding: 28px 0;
  text-align: center;
  font-size: .85rem;
}
.footer a { color: rgba(255, 255, 255, .6); transition: color var(--ease); }
.footer a:hover { color: var(--sage-light); }


/* ══════════════════════════════════════
   16. SCROLL ANIMATIONS
══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.in { opacity: 1; transform: none; }

.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.stagger.in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .08s; }
.stagger.in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .18s; }
.stagger.in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .28s; }
.stagger.in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .38s; }
.stagger.in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .48s; }
.stagger.in > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .58s; }


/* ══════════════════════════════════════
   17. RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }

  .hero__inner           { grid-template-columns: 1fr; text-align: center; }
  .hero__quote           { margin-left: auto; margin-right: auto; }
  .hero__actions         { justify-content: center; }
  .hero__visual          { order: -1; }
  .hero__frame           { width: min(320px, 78%); margin: 0 auto; }
  .hero__badge--left     { left: 0;  bottom: 20px; }
  .hero__badge--right    { right: 0; top: 20px;    }

  .about__inner          { grid-template-columns: 1fr; }
  .about__secondary      { width: 44%; bottom: -24px; right: -16px; }

  .experience__inner     { grid-template-columns: 1fr; }
  .experience__aside     { position: static; }
  .experience__aside-img { display: none; }

  .community__inner      { grid-template-columns: 1fr; }
  .community__photo-wrap { display: none; }

  .contact__inner        { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero__badge--left,
  .hero__badge--right  { display: none; }
  .about__secondary    { display: none; }
  .about__stats        { gap: 12px; }
  .philosophy__grid    { grid-template-columns: 1fr; }
  .strengths__grid     { grid-template-columns: 1fr; }
  .materials__grid     { grid-template-columns: 1fr; }
  .credentials__grid   { grid-template-columns: 1fr; }
  .docs-grid           { flex-direction: column; align-items: stretch; }
  .doc-card            { min-width: auto; }
}