/* ============================================================
   HUZAIFA FAROOQ — PROJECT PAGE
   project.css
   ============================================================
   TABLE OF CONTENTS
   1.  Project Hero
   2.  Back Link
   3.  Project Meta
   4.  Project Info Strip
   5.  Project Sections
   6.  Project Content Grid (text + image)
   7.  Project Cover Image
   8.  Project Image Grid
   9.  Project Image Blocks & Placeholders
   10. Approach Steps Grid
   11. Key Findings
   12. Project CTA Section
   13. Project Details Strip (hero)
   14. Project Split Layout
   15. Project Full-Width Image
   16. Project List
   17. Project Findings (hero stats)
   18. Project PDF Card
   19. Project Nav (prev/next)
   20. Project Conclusion
   21. Responsive — Tablet (max-width: 1024px)
   22. Responsive — Mobile (max-width: 767px)
   23. Responsive — Small Mobile (max-width: 480px)
   ──────────────────────────────────────────────────────────
   24. HARO PAGE — Spatial Maps Grid
   25. HARO PAGE — Quantitative Results
   26. HARO PAGE — Responsive
   ──────────────────────────────────────────────────────────
   27. EUROSAT PAGE — Training Charts Grid
   28. EUROSAT PAGE — Full-Width Figures
   29. EUROSAT PAGE — GitHub CTA
   30. EUROSAT PAGE — Responsive
============================================================ */


/* ============================================================
   1. PROJECT HERO
============================================================ */

.project-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px));
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--color-border);
}

.project-hero .container {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}


/* ============================================================
   2. BACK LINK
============================================================ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--ease), gap var(--ease);
}

.back-link:hover {
  color: var(--color-accent);
  gap: 12px;
}

.back-link svg {
  flex-shrink: 0;
  transition: transform var(--ease);
}

.back-link:hover svg {
  transform: translateX(-3px);
}

/* project-back: same style, used in haro.html */
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--ease), gap var(--ease);
}

.project-back:hover {
  color: var(--color-accent);
  gap: 12px;
}

.project-back svg {
  flex-shrink: 0;
  transition: transform var(--ease);
}

.project-back:hover svg {
  transform: translateX(-3px);
}


/* ============================================================
   3. PROJECT META
============================================================ */

.project-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.project-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.project-year {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}

.project-title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 6vw, 92px);
  font-weight: 500;
  line-height: 0.95em;
  letter-spacing: -0.02em;
  color: var(--color-text);
  max-width: 860px;
}

.project-title em {
  font-style: italic;
  color: var(--color-accent);
}

.project-summary {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 640px;
}


/* ============================================================
   4. PROJECT INFO STRIP
============================================================ */

.project-info-strip {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  background-color: var(--color-border);
  margin-top: var(--space-sm);
}

.project-info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 2vw, 24px) clamp(16px, 2.5vw, 28px);
  background-color: #FAF7F4;
}

.project-info-divider {
  width: 1px;
  background-color: var(--color-border);
  flex-shrink: 0;
}

.info-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.info-value {
  font-family: var(--font-heading);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}


/* ============================================================
   5. PROJECT SECTIONS
============================================================ */

.project-section {
  padding-top: clamp(48px, 7vw, 100px);
  padding-bottom: clamp(48px, 7vw, 100px);
  border-bottom: 1px solid var(--color-border);
}

.project-section--alt {
  background-color: #FAF7F4;
}

.project-section--light {
  background-color: #FAF7F4;
  background-image: none;
}

.project-section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(9px, 0.85vw, 11px);
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.5vw, 20px);
}

.project-section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.project-section-title em {
  font-style: italic;
  color: var(--color-accent);
}

.project-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: clamp(12px, 1.5vw, 20px);
}

.project-body:last-child {
  margin-bottom: 0;
}

.project-text--centered {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.project-body--wide {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   6. PROJECT CONTENT GRID
============================================================ */

.project-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.project-text {
  display: flex;
  flex-direction: column;
}

.project-image-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ============================================================
   7. PROJECT COVER IMAGE
============================================================ */

.project-cover {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-cover-img {
  width: 100%;
  height: clamp(300px, 45vw, 560px);
  object-fit: cover;
  display: block;
  border: 1px solid var(--color-border);
}


/* ============================================================
   8. PROJECT IMAGE GRID
============================================================ */

.project-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  margin-top: clamp(32px, 4vw, 56px);
}

.project-image-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ============================================================
   9. PROJECT IMAGES & PLACEHOLDERS
============================================================ */

.project-img {
  width: 100%;
  height: clamp(200px, 28vw, 380px);
  object-fit: cover;
  display: block;
  border: 1px solid var(--color-border);
  transition: opacity var(--ease);
}

.project-img:hover {
  opacity: 0.92;
}

.img-placeholder {
  display: none;
  width: 100%;
  height: clamp(200px, 28vw, 380px);
  background-color: #EDE3D9;
  border: 1px dashed var(--color-border);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
}

.img-placeholder span {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.placeholder-size {
  font-size: 11px !important;
  color: rgba(122, 110, 101, 0.5) !important;
  letter-spacing: 0.1em !important;
}

.project-cover .img-placeholder {
  height: clamp(300px, 45vw, 560px);
}

.img-caption {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 12px);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  font-style: italic;
  line-height: 1.5;
}

/* project-img-caption variant used in original haro sections */
.project-img-caption {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 12px);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  font-style: italic;
  line-height: 1.5;
  margin-top: 8px;
}


/* ============================================================
   10. APPROACH STEPS GRID
============================================================ */

.approach-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: clamp(32px, 4vw, 56px);
}

.approach-step-card {
  background-color: var(--color-bg);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--ease);
}

.approach-step-card:hover {
  background-color: rgba(232, 93, 47, 0.04);
}

.step-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 0.2em;
}

.step-title {
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.15;
}

.step-body {
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 13px);
  color: var(--color-text-muted);
  line-height: 1.7;
}


/* ============================================================
   11. KEY FINDINGS
============================================================ */

.findings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: clamp(32px, 4vw, 56px);
}

.finding-item {
  background-color: var(--color-bg);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: background var(--ease);
}

.finding-item:hover {
  background-color: rgba(232, 93, 47, 0.04);
}

.finding-accent {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-accent);
  line-height: 1;
  flex-shrink: 0;
  margin-top: -4px;
}

.finding-item p {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--color-text-muted);
  line-height: 1.75;
}


/* ============================================================
   12. PROJECT CTA SECTION
============================================================ */

.project-cta-section {
  background-color: #EDE3D9;
  background-image: none;
  border-bottom: none;
}

.project-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: clamp(32px, 4vw, 48px);
}

.project-cta-left {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.project-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.project-cta-title em {
  font-style: italic;
  color: var(--color-accent);
}

.project-cta-body {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 400px;
}

.project-pdf-btn {
  align-self: flex-start;
}

.project-cta-right {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  padding-top: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--color-border);
  padding-left: clamp(32px, 4vw, 64px);
}

.project-contact-title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.project-back-row {
  display: flex;
  justify-content: flex-start;
}


/* ============================================================
   13. PROJECT DETAILS STRIP (hero)
============================================================ */

.project-details {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  background-color: var(--color-border);
  gap: 1px;
  margin-top: 8px;
}

.project-detail-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 2vw, 22px) clamp(16px, 2.5vw, 28px);
  background-color: var(--color-bg);
}

.project-detail-divider {
  width: 1px;
  background-color: var(--color-border);
  flex-shrink: 0;
}

.detail-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.detail-value {
  font-family: var(--font-heading);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}


/* ============================================================
   14. PROJECT SPLIT LAYOUT
============================================================ */

.project-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.project-split--reverse {
  direction: rtl;
}

.project-split--reverse > * {
  direction: ltr;
}

.project-split-text {
  display: flex;
  flex-direction: column;
}

.project-split-image {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-text-block {
  max-width: 680px;
}


/* ============================================================
   15. PROJECT FULL-WIDTH IMAGE
============================================================ */

.project-image-full {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ============================================================
   16. PROJECT LIST
============================================================ */

.project-list {
  margin: clamp(16px, 2vw, 24px) 0 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-list li {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ============================================================
   17. PROJECT FINDINGS (hero stats grid)
============================================================ */

.project-findings {
  margin-top: clamp(32px, 4vw, 48px);
}

.findings-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.project-findings .findings-grid {
  grid-template-columns: 1fr 1fr;
}

.finding-value {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}

.finding-desc {
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  color: var(--color-text-muted);
  line-height: 1.5;
  display: block;
}


/* ============================================================
   18. PROJECT PDF CARD
============================================================ */

.project-pdf-wrap {
  margin-top: clamp(32px, 4vw, 56px);
}

.project-pdf-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--color-border);
  padding: clamp(20px, 3vw, 32px) clamp(24px, 3.5vw, 40px);
  background-color: #FAF7F4;
}

.pdf-card-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pdf-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pdf-title {
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  color: var(--color-text);
}

.pdf-subtitle {
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 13px);
  color: var(--color-text-muted);
}

.pdf-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* ============================================================
   19. PROJECT NAV (prev / next)
============================================================ */

.project-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--color-border);
  gap: 24px;
  flex-wrap: wrap;
}

.project-nav-back,
.project-nav-next {
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 14px);
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--ease);
}

.project-nav-back:hover,
.project-nav-next:hover {
  color: var(--color-accent);
}


/* ============================================================
   20. PROJECT CONCLUSION
============================================================ */

.project-conclusion {
  border-bottom: none;
}


/* ============================================================
   21. RESPONSIVE — TABLET (max-width: 1024px)
============================================================ */

@media (max-width: 1024px) {

  .project-info-strip {
    flex-wrap: wrap;
  }

  .project-info-item {
    flex: 0 0 50%;
    border-bottom: 1px solid var(--color-border);
  }

  .project-info-divider {
    display: none;
  }

  .approach-steps-grid {
    grid-template-columns: 1fr 1fr;
  }

  .project-cta-grid {
    grid-template-columns: 1fr;
  }

  .project-cta-right {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: clamp(24px, 3vw, 40px);
  }

  .project-details {
    flex-wrap: wrap;
    gap: 1px;
  }

  .project-detail-item {
    flex: 0 0 calc(50% - 0.5px);
  }

  .project-detail-divider {
    display: none;
  }

}


/* ============================================================
   22. RESPONSIVE — MOBILE (max-width: 767px)
============================================================ */

@media (max-width: 767px) {

  .project-title {
    font-size: clamp(36px, 8vw, 56px);
  }

  .project-content-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .project-image-grid {
    grid-template-columns: 1fr;
  }

  .project-info-item {
    flex: 0 0 100%;
  }

  .approach-steps-grid {
    grid-template-columns: 1fr;
  }

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

  .project-cover-img,
  .project-cover .img-placeholder {
    height: clamp(200px, 50vw, 320px);
  }

  .project-img,
  .img-placeholder {
    height: clamp(180px, 55vw, 280px);
  }

  .project-split,
  .project-split--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .project-pdf-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-detail-item {
    flex: 0 0 100%;
  }

  .project-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

}


/* ============================================================
   23. RESPONSIVE — SMALL MOBILE (max-width: 480px)
============================================================ */

@media (max-width: 480px) {

  .project-title {
    font-size: 32px;
    line-height: 1.05em;
  }

  .project-section-title {
    font-size: 26px;
  }

  .project-cta-title {
    font-size: 26px;
  }

  .project-info-strip {
    flex-direction: column;
  }

  .project-pdf-btn {
    width: 100%;
    justify-content: center;
  }

}


/* ============================================================
   24. HARO PAGE — SPATIAL MAPS GRID
   Six maps in three rows of two columns each.
============================================================ */

/* Section intro (label + short description) */
.haro-section-intro {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.haro-section-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: 4px;
  max-width: 560px;
}

/* 2-column map grid */
.haro-maps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}

.haro-maps-grid--mt {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Individual map card */
.haro-map-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Image wrapper — enforces consistent portrait-ish ratio */
.haro-map-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: #EDE3D9;
}

.haro-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.haro-map-img:hover {
  opacity: 0.9;
}

/* Text below each map */
.haro-map-meta {
  padding: clamp(12px, 1.5vw, 18px) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 2px solid var(--color-accent);
  margin-top: 12px;
}

.haro-map-title {
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.haro-map-caption {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.95vw, 13px);
  color: var(--color-text-muted);
  line-height: 1.55;
  font-style: italic;
}


/* ============================================================
   25. HARO PAGE — QUANTITATIVE RESULTS
   Pie pair + three full-width horizontal figures.
============================================================ */

/* Sub-section label (inside quantitative section) */
.haro-subsection-label {
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: 6px;
}

.haro-subsection-label:first-of-type,
.haro-subsection-label--first {
  margin-top: 0;
}

.haro-subsection-label--mt {
  margin-top: clamp(48px, 6vw, 80px);
}

.haro-subsection-desc {
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 14px);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  max-width: 640px;
}


.haro-chart-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.haro-chart-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: #EDE3D9;
}

.haro-chart-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
}

.haro-chart-caption {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.95vw, 13px);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* Full-width horizontal figures (bar charts, tables) */
.haro-fullwidth-chart {
  width: 100%;
  border: 1px solid var(--color-border);
  background-color: #EDE3D9;
  overflow: hidden;
}

.haro-fw-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}


/* ============================================================
   26. HARO PAGE — RESPONSIVE
============================================================ */

@media (max-width: 900px) {

  .haro-maps-grid {
    gap: clamp(16px, 2.5vw, 28px);
  }

}

@media (max-width: 640px) {

  .haro-maps-grid {
    grid-template-columns: 1fr;
  }

  .haro-map-img-wrap {
    aspect-ratio: 3 / 2;
  }

  .haro-chart-img-wrap {
    aspect-ratio: 3 / 2;
  }

}


/* ============================================================
   27. EUROSAT PAGE — TRAINING CHARTS GRID
   Two side-by-side training/validation charts (loss + F1).
============================================================ */

/* 2-column chart grid — mirrors haro-maps-grid but landscape ratio */
.eurosat-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 0;
}

/* Individual chart card */
.eurosat-chart-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Image wrapper — landscape aspect for charts */
.eurosat-chart-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: #F5F0EB;
}

.eurosat-chart-img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* contain so chart axes stay visible */
  display: block;
  transition: opacity 0.3s ease;
}

.eurosat-chart-img:hover {
  opacity: 0.9;
}


/* ============================================================
   28. EUROSAT PAGE — FULL-WIDTH FIGURES
   Confusion matrix and summary report span the full container.
============================================================ */

.eurosat-fullwidth-figure {
  width: 100%;
  border: 1px solid var(--color-border);
  background-color: #F5F0EB;
  overflow: hidden;
}

.eurosat-fw-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}


/* ============================================================
   29. EUROSAT PAGE — GITHUB CTA
   Dark navy card matching the reference screenshot.
============================================================ */

.eurosat-github-section {
  padding-top: clamp(48px, 7vw, 100px);
  padding-bottom: clamp(48px, 7vw, 100px);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.eurosat-github-card {
  background-color: #1A2744;
  border-radius: 12px;
  padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px);
}

.eurosat-github-content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  max-width: 560px;
}

.eurosat-github-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.eurosat-github-body {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
}

.eurosat-github-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1A2744;
  background-color: #FFFFFF;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.eurosat-github-btn:hover {
  background-color: rgba(255, 255, 255, 0.88);
  opacity: 1;
}

.eurosat-github-btn svg {
  flex-shrink: 0;
}


/* ============================================================
   30. EUROSAT PAGE — RESPONSIVE
============================================================ */

@media (max-width: 900px) {

  .eurosat-charts-grid {
    gap: clamp(16px, 2.5vw, 28px);
  }

}

@media (max-width: 640px) {

  /* Charts: stack to single column on mobile */
  .eurosat-charts-grid {
    grid-template-columns: 1fr;
  }

  .eurosat-chart-img-wrap {
    aspect-ratio: 4 / 3;
  }

  /* GitHub card: tighten padding */
  .eurosat-github-card {
    padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 32px);
  }

  .eurosat-github-btn {
    width: 100%;
    justify-content: center;
  }

}

@media (max-width: 480px) {

  .eurosat-github-title {
    font-size: 26px;
  }

}

/* ============================================================
   EUROSAT PAGE — SINGLE LANDSCAPE CHART
============================================================ */

.eurosat-single-chart {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.eurosat-single-chart-wrap {
  width: 100%;
  aspect-ratio: 16 / 6;          /* wide landscape ratio matching the screenshot */
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: #F5F0EB;
}

.eurosat-single-chart-img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* keeps both chart axes fully visible */
  display: block;
  transition: opacity 0.3s ease;
}

.eurosat-single-chart-img:hover {
  opacity: 0.9;
}

.eurosat-single-chart-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 2px solid var(--color-accent);
  margin-top: 12px;
  padding-top: clamp(10px, 1.5vw, 16px);
}

/* Responsive */
@media (max-width: 640px) {
  .eurosat-single-chart-wrap {
    aspect-ratio: 16 / 9;        /* slightly taller on mobile so charts stay readable */
  }
}

@media (max-width: 480px) {
  .eurosat-single-chart-wrap {
    aspect-ratio: 4 / 3;
  }
}