/* ================= GLOBAL STYLES ================= */
html { scroll-behavior: smooth; }

body {
  overflow-x: hidden;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  background: #fff;
}

h1 { margin: 0; text-decoration: underline; }
h2, h3 { margin: 0; }

h3 {
  font-weight: bolder;
  margin-bottom: 10px;
}

p {
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

p:last-child { margin-bottom: 0; }

/* ================= FIGURES ================= */
figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

figure img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #555;
  text-align: center;
  letter-spacing: 0.5px;
}

/* ================= GLOBAL WIDTH SYSTEM ================= */
.grid-wide,
.carousel,
.combo-block {
  width: min(70%, 1200px);
  margin-left: auto;
  margin-right: auto;
}

/* ================= IMAGE DIV SYSTEM ================= */
.img {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 10px;

  aspect-ratio: 16 / 9;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  background-color: #ddd;
}

/* ================= SECTION NAV ================= */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #000;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.9rem 1rem;
  border-bottom: 2px solid #00aaff;
}

.section-nav a {
  color: #00aaff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
}

/* ================= SECTIONS ================= */
.section {
  padding: 4.5rem 2rem;
  scroll-margin-top: 120px;
}

.section.white { background: #fff; }
.section.grey { background: #d8e2ec; }

.section h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  letter-spacing: 3px;
  font-size: 1.4rem;
}

.section-description {
  max-width: 850px;
  margin: 1.8rem auto 2.2rem;
  padding: 0 1.5rem;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #333;
}

/* ================= GRIDS ================= */
.grid {
  max-width: 1200px;
  margin: 0 auto 3rem;
  display: grid;
  gap: 1.6rem;
}

.grid-1 { max-width: 720px; margin: 2.5rem auto 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* wide images */
.grid-wide .img {
  aspect-ratio: 21 / 8;
}

/* ================= IMAGE PLACEHOLDERS ================= */
/* ================= IMAGE PLACEHOLDERS ================= */ /* Section 2 */ .s2-1 { background-image: url('../images/projects/Meg_001.jpg'); } .s2-2 { background-image: url('../images/projects/meg_tm.JPG'); } .s2-3 { background-image: url('../images/projects/m_001a.jpg'); } .s2-side { background-image: url('../images/projects/Megane_2018.png'); } .s2-wide { background-image: url('../images/projects/meg_project/Meg_Race_001.jpg'); } /* Section 3 */ .s3-1 { background-image: url('../images/projects/dacia_project/Hunter_Combo_001.jpg'); } .s3-side { background-image: url('../images/projects/dacia_project/Dacia_007.jpg'); } .s3-def-1 { background-image: url('../images/projects/dacia_project/Def_001c.jpg'); } .s3-def-2 { background-image: url('../images/projects/dacia_project/Def_002.jpeg'); } .s3-wide { background-image: url('../images/projects/dacia_project/Dacia_006.jpg'); } /* Section 4 */ .s4-combo { background-image: url('../images/projects/mclaren_project/M8D_Combo_001.jpg'); } .s4-side-1 { background-image: url('../images/projects/mclaren_project/M8_side_001.jpg'); } .s4-side-2 { background-image: url('../images/projects/mclaren_textb.jpg'); } .s4-wide { background-image: url('../images/projects/mclaren_bottom.jpg'); } .s4-wide2 { background-image: url('../images/projects/mclaren_project/M8_Rear_001.jpg'); } /* Section 5 */ .s5-1 { background-image: url('../images/projects/subaru_tl.JPG'); } .s5-2 { background-image: url('../images/projects/subaru_tm.jpg'); } .s5-3 { background-image: url('../images/projects/subaru-tr.jpg'); } .s5-side { background-image: url('../images/projects/subaru_text.jpg'); } .s5-wide { background-image: url('../images/projects/subaru-bottom.jpg'); } /* Section 6 */ .s6-1 { background-image: url('../images/projects/ast_tl.png'); } .s6-2 { background-image: url('../images/projects/ast_tr.png'); } .s6-3 { background-image: url('../images/projects/aston_project/Aston_Fenderette.jpg'); } .s6-4 { background-image: url('../images/projects/aston_project/Robot_009s.jpg'); } .s6-wide { background-image: url('../images/projects/ast_bottom.jpg'); }

/* ================= CAROUSEL ================= */
.carousel {
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.slide {
  min-width: 100%;
  aspect-ratio: 21 / 8;
}

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* nav */
.carousel .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 2rem;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
  border-radius: 5px;
}

.carousel .prev { left: 10px; }
.carousel .next { right: 10px; }

/* ================= SIDE BY SIDE (FIXED) ================= */
.side-by-side {
  max-width: 1200px;
  margin: 3.5rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

/* 🔥 critical fix */
.side-by-side > * {
  min-width: 0;
}

/* ================= STACK LAYOUT ================= */
.stack-layout {
  max-width: 1200px;
  margin: 3.5rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.stack-images {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.stack-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* ================= COMBO BLOCK (CLEANED) ================= */
.combo-block {
  margin: 50px auto 40px;
  text-align: center;
}

/* unified image behaviour */
.combo-block img,
.combo-block .img {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 12px;
  margin: 0 auto;
}

/* captions */
.combo-captions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;

  margin-top: 12px;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* ================= RESPONSIVE ================= */

/* 🔥 TABLET (this fixes Section 4 properly) */
@media (max-width: 1100px) {
  .side-by-side {
    grid-template-columns: 1fr;
  }

  .stack-layout {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* MOBILE */
@media (max-width: 600px) {
  .grid-wide,
  .carousel,
  .combo-block {
    width: 95%;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-6 {
    grid-template-columns: 1fr;
  }

  .combo-captions {
    justify-content: center;
    gap: 1rem;
  }
}