/* ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   1. CSS Custom Properties
   2. Reset & Base
   3. Header
   4. Navigation (Shared)
   5. Hamburger Menu
   6. Mobile Navigation  (@media ≤ 768px)
   7. Parallax + Improved Text Readability (text-shadow removed)
   8. Hero Section
   9. Content Sections
   10. Buttons
   11. Contact & Form (background restored to previous gradient)
   12. Social Links
   13. Footer
   14. Responsive Breakpoints
   15. Utilities
   16. Accessibility (Reduced Motion)
   17. Mobile Parallax Adjustment
═══════════════════════════════════════════════════════════════ */


/* ─── 1. CSS Custom Properties ──────────────────────────────── */
:root {
  --site-width:            1400px;
  --primary-color:         #14647c;
  --hover-color:           #90d2d8;
  --header-height:         80px;
  --middle-column-indent:  clamp(2rem, 6vw, 4rem);
  --gallery-top-offset:    8rem;

  /* Transitions */
  --transition-color:      color 0.35s ease, background-color 0.35s ease;
  --transition-transform:  transform 0.25s ease;
  --transition-shadow:     box-shadow 0.25s ease;
  --transition-link:       var(--transition-color), var(--transition-transform);
}


/* ─── 2. Reset & Base ────────────────────────────────────────── */
*,
*::before,
*::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
  list-style: none;
}

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

body {
  font-family:         "Poppins", sans-serif;
  background-color:    #fff;
  padding-block-start: var(--header-height);
  overflow-x:          hidden;
}

a {
  color:           var(--primary-color);
  text-decoration: none;
  cursor:          pointer;
}


/* ─── 3. Header ──────────────────────────────────────────────── */
header {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  height:           var(--header-height);
  background-color: #fff;
  z-index:          1000;
}

.header-container {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  height:          100%;
  padding-inline:  clamp(1rem, 5vw, 20px);
}

.logo img {
  height: clamp(40px, 8vw, 50px);
}


/* ─── 4. Navigation (Shared) ────────────────────────────────── */
.header-nav-links,
.footer-nav-links {
  display:     flex;
  gap:         clamp(10px, 3vw, 20px);
  font-weight: 500;
}

.header-nav-links {
  margin-left:     auto;
  align-items:     center;
  justify-content: flex-end;
  font-size:       clamp(0.9rem, 1.8vw, 1.1rem);
}

.header-nav-links a,
.footer-nav-links a,
.social-links a {
  color:      var(--primary-color);
  position:   relative;
  transition: var(--transition-link);
}

.header-nav-links a:hover,
.header-nav-links a:focus,
.footer-nav-links a:hover,
.footer-nav-links a:focus,
.social-links a:hover,
.social-links a:focus {
  color: var(--hover-color);
}

.header-nav-links a::after,
.footer-nav-links a::after {
  content:          "";
  position:         absolute;
  bottom:           -0.15em;
  left:             0;
  right:            0;
  height:           1.5px;
  background-color: var(--hover-color);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.25s ease-in-out;
}

.header-nav-links a:hover::after,
.header-nav-links a:focus::after,
.footer-nav-links a:hover::after,
.footer-nav-links a:focus::after {
  transform: scaleX(1);
}


/* ─── 5. Hamburger Menu ─────────────────────────────────────── */
.ham-menu {
  display:    none;
  flex-direction: column;
  gap:        4px;
  cursor:     pointer;
  background: transparent;
  border:     none;
  padding:    8px;
  border-radius: 4px;
  z-index:    1003;
}

.ham-menu span {
  width:            25px;
  height:           3px;
  background-color: var(--primary-color);
  border-radius:    3px;
  transition:       background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.ham-menu:hover span {
  background-color: var(--hover-color);
}

.ham-menu:focus-visible {
  outline:        2px solid var(--primary-color);
  outline-offset: 4px;
}

.ham-menu.active span:nth-child(1) { transform: rotate(45deg)  translate(5px,  5px); }
.ham-menu.active span:nth-child(2) { opacity: 0; }
.ham-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


/* ─── 6. Mobile Navigation ──────────────────────────────────── */
@media (max-width: 768px) {
  .ham-menu {
    display:    flex;
    opacity:    1;
    visibility: visible;
    z-index:    1003;
  }

  .header-nav-links {
    position:         fixed;
    top:              var(--header-height);
    left:             0;
    width:            100%;
    height:           calc(100vh - var(--header-height));
    background-color: #fff5f8;
    flex-direction:   column;
    justify-content:  center;
    align-items:      center;
    gap:              3rem;
    opacity:          0;
    transform:        scaleY(0);
    transform-origin: top;
    transition:       opacity 0.3s ease, transform 0.4s ease;
    z-index:          1001;
    padding-block:    2rem;
    overflow-y:       auto;
  }

  .header-nav-links.active {
    opacity:   1;
    transform: scaleY(1);
  }

  .header-nav-links a {
    font-size: 2rem;
  }

  .header-container {
    padding-inline: 1rem;
  }
}


/* ─── 7. Parallax ───────────────────────────────────────────── */
.hero,
.section-overlay {
  position: relative;
  overflow: hidden;          /* clips the oversized ::before */
}

/* The parallax background layer */
.hero::before,
.section-overlay::before {
  content:             "";
  position:            absolute;
  inset:               -30% 0;   /* taller than section so edges never show */
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  will-change:         transform;
  z-index:             0;
  pointer-events:      none;
  /* JS sets translateY via inline style */
}

/* Dark gradient overlay for readability */
.hero::after,
.section-overlay::after {
  content:        "";
  position:       absolute;
  inset:          0;
  z-index:        1;
  background:     linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.21) 60%,
    rgba(0, 0, 0, 0.32) 100%
  );
  pointer-events: none;
}

/* Text weight */
.hero-header,
.content-header {
  font-weight: 800;
}

.hero-text,
.section-intro .content-text {
  font-weight: 600;
}

/* Ensure content sits above both layers */
.hero-content,
.content-header,
.section-intro {
  position: relative;
  z-index:  2;
}

/* Background images on the ::before pseudo-element */
/* Use section.classname selectors to ensure higher specificity than the
   JS-injected .section-overlay::before rule, preventing intermittent
   background-image loss (particularly on the portraits section). */
#hero::before             { background-image: url("../img/portfolio/main/DJI_0058.webp"); }
#about::before            { background-image: url("../img/portfolio/main/IMG_3236.webp"); }
section.people::before    { background-image: url("../img/portfolio/main/IMG_3878copy.webp"); }
section.places::before    { background-image: url("../img/portfolio/main/IMG_2887.webp"); }
section.portraits::before { background-image: url("../img/portfolio/main/IMG_0082_copy.webp"); }


/* ─── 8. Hero Section ────────────────────────────────────────── */
.hero-container {
  min-height: 100vh;
  display:    grid;
  grid-template-columns: 1fr;
  width:      100%;
  position:   relative;
  z-index:    1;
}

.hero-content {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             clamp(1rem, 4vw, 2rem);
  text-align:      center;
  padding-inline:  clamp(1rem, 5vw, 2rem);
}

.hero-header {
  color:       #ffffff;
  font-size:   clamp(4rem, 10vw, 9rem);
  font-weight: 700;
}

.hero-text {
  color:       #14647c;
  font-size:   clamp(2rem, 6vw, 4.5rem);
  font-weight: 600;
}


/* ─── 9. Content Sections ────────────────────────────────────── */
.content {
  min-height: 100vh;
  display:    grid;
  grid-template-columns: minmax(150px, 3fr) minmax(min(400px, 100%), 5fr) minmax(80px, 1fr);
  width:      100%;
  padding-inline: clamp(1rem, 5vw, 20px);
  position:   relative;
  z-index:    1;
}

.content-header {
  grid-column:     1;
  align-self:      center;
  justify-self:    start;
  text-align:      left;
  padding-inline-start: clamp(1rem, 5vw, 20px);
  color:           #fff;
  font-size:       clamp(3rem, 6vw, 8rem);
  font-weight:     700;
  position:        relative;
  z-index:         1;
}

.section-intro {
  grid-column:     2;
  align-self:      center;
  justify-self:    start;
  width:           100%;
  display:         flex;
  flex-direction:  column;
  gap:             clamp(1.5rem, 4vw, 3rem);
  padding-inline-start: var(--middle-column-indent);
  padding-inline-end: clamp(2rem, 5vw, 5rem);
  align-items:     flex-start;
  padding:         5em 0;
}

.section-intro .content-text {
  color:        #fff;
  line-height:  1.8;
  font-size:    clamp(1.15rem, 2.5vw, 1.75rem);
  max-width:    80ch;
  position:     relative;
  z-index:      1;
  margin-left:  2em;
  margin-right: 2em;
}


/* ─── 10. Buttons ────────────────────────────────────────────── */
.submit-btn,
.gallery-button {
  display:        inline-block;
  width:          100%;
  background:     var(--primary-color);
  color:          #fff;
  padding:        1rem 2.4rem;
  font-size:      1.15rem;
  font-weight:    600;
  border-radius:  10px;
  border:         none;
  cursor:         pointer;
  text-align:     center;
  transition:     var(--transition-color), var(--transition-transform), var(--transition-shadow), opacity 0.25s ease;
}

.submit-btn:hover,
.submit-btn:focus,
.gallery-button:hover,
.gallery-button:focus {
  background: var(--hover-color);
  color:      #fff;
  transform:  translateY(-3px);
  box-shadow: 0 10px 25px rgba(20, 100, 124, 0.25);
  opacity:    0.95;
}

.gallery-button {
  width:      auto;
  align-self: flex-end;
}


/* ─── 11. Contact & Form (background restored) ──────────────── */
.contact {
  background: linear-gradient(135deg, #f8a9b1 0%, #f89da9 40%, #f69db8 60%);
  /* This is the original colorful gradient from earlier versions */
}

.contact-grid {
  display:         grid;
  grid-template-columns: 3fr 1fr;
  gap:             clamp(2rem, 4vw, 4rem);
  width:           100%;
  align-items:     start;
}

.content-contact-form {
  width:               100%;
  background:          rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter:     blur(8px);
  border-radius:       14px;
  padding:             clamp(2rem, 4vw, 3rem);
  box-shadow:          0 8px 30px rgba(0, 0, 0, 0.12);
}

.form-group.floating {
  position:     relative;
  margin-bottom: 2rem;
}

.form-group.floating input,
.form-group.floating textarea {
  width:       100%;
  padding:     1.2rem 1.2rem 0.6rem 1.2rem;
  border:      2px solid rgba(20, 100, 124, 0.3);
  border-radius: 10px;
  background:  rgba(255, 255, 255, 0.75);
  font-size:   1.05rem;
  transition:  border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.form-group.floating input:focus,
.form-group.floating textarea:focus {
  border-color: var(--primary-color);
  background:   #fff;
  box-shadow:   0 0 0 4px rgba(20, 100, 124, 0.15);
  outline:      none;
}

.form-group.floating label {
  position:         absolute;
  top:              1rem;
  left:             1.2rem;
  color:            rgba(20, 100, 124, 0.7);
  font-size:        1.05rem;
  pointer-events:   none;
  transition:       all 0.25s ease;
}

.form-group.floating input:focus + label,
.form-group.floating textarea:focus + label,
.form-group.floating input:not(:placeholder-shown) + label,
.form-group.floating textarea:not(:placeholder-shown) + label {
  top:        -0.6rem;
  left:       1rem;
  font-size:  0.85rem;
  padding:    0 0.3rem;
  background: rgba(255, 255, 255, 0.85);
  color:      var(--primary-color);
}

.contact-social {
  display:         flex;
  flex-direction:  column;
  gap:             1.5rem;
  padding-top:     1rem;
}


/* ─── 12. Social Links ──────────────────────────────────────── */
.social-title {
  color:       var(--primary-color);
  font-size:   clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
}

.social-links {
  display:        flex;
  flex-direction: column;
  gap:            1.2rem;
}

.social-links a {
  display:        flex;
  align-items:    center;
  gap:            0.8rem;
  font-size:      1.2rem;
  color:          var(--primary-color);
}


/* ─── 13. Footer ────────────────────────────────────────────── */
footer {
  width:      100%;
  background: linear-gradient(135deg, rgba(254, 149, 193, 0.1) 0%, rgba(248, 157, 169, 0.25) 50%, rgba(246, 166, 178, 0.15) 100%);
}

.footer-container {
  display:         grid;
  grid-template-areas:
    "header nav social"
    "copyright copyright copyright";
  grid-template-columns: 4fr 3fr 2fr;
  grid-template-rows:    auto auto;
  align-items:     start;
  column-gap:      clamp(2rem, 5vw, 4rem);
  padding:         clamp(3rem, 6vw, 5rem) clamp(1rem, 5vw, 20px) clamp(2rem, 4vw, 3rem);
}

.footer-header {
  grid-area:      header;
  justify-self:   start;
  color:          var(--primary-color);
  font-size:      clamp(3rem, 20vw, 12rem);
  font-weight:    700;
}

.footer-nav {
  grid-area:      nav;
  justify-self:   center;
}

.footer-nav-links {
  flex-direction: column;
  align-items:    center;
  gap:            30px;
  font-size:      clamp(1.2rem, 3vw, 1.5rem);
}

.footer-social {
  grid-area:      social;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             1rem;
}

.footer-social .social-title {
  margin:      0;
  font-size:   clamp(1.3rem, 2.2vw, 1.6rem);
}

.footer-social .social-links {
  gap:         0.9rem;
}

.footer-social .social-links a {
  font-size:   1.1rem;
  gap:         0.7rem;
}

.footer-social .social-links i {
  font-size:   1.4rem;
}

.copyright-text {
  grid-area:   copyright;
  text-align:  center;
  padding-block: 1rem 2rem;
  color:       #464646;
}


/* ─── 14. Responsive Breakpoints ───────────────────────────── */

/* ≥ 1400px */
@media (min-width: 1400px) {
  .footer-container {
    grid-template-columns: 5fr 3.5fr 2.5fr;
  }
}

/* ≤ 1200px */
@media (max-width: 1200px) {
  :root {
    --middle-column-indent: clamp(1.8rem, 5vw, 3.5rem);
  }

  .hero-header    { font-size: clamp(3.5rem, 9vw, 7rem); }
  .hero-text      { font-size: clamp(1.8rem, 5vw, 4rem); }
  .content-header { font-size: clamp(2.4rem, 6vw, 7rem); }

  .footer-container {
    grid-template-columns: 3fr 2.5fr 1.8fr;
    column-gap: 2rem;
  }

  .footer-header { font-size: clamp(2.5rem, 16vw, 9rem); }
}

/* ≤ 992px */
@media (max-width: 992px) {
  :root {
    --middle-column-indent: clamp(1.5rem, 4vw, 3rem);
  }

  .hero-header    { font-size: clamp(3rem, 8vw, 6rem); }
  .content-header { font-size: clamp(2.4rem, 6vw, 5.5rem); }
}

/* ≤ 768px */
@media (max-width: 768px) {
  section {
    background-attachment: scroll;
  }

  .content {
    grid-template-columns: 1fr;
    padding-inline: clamp(1.5rem, 6vw, 3rem);
    padding-block:  clamp(3rem, 8vw, 5rem);
  }

  .content-header {
    grid-column:          1;
    justify-self:         center;
    text-align:           center;
    padding:              0;
    margin:               0 auto 1.5rem;
    font-size:            clamp(2.8rem, 9vw, 5rem);
  }

  .section-intro {
    grid-column:          1;
    justify-self:         center;
    align-items:          center;
    text-align:           center;
    padding:              clamp(1.5rem, 6vw, 3rem);
    margin:               0 auto;
    width:                100%;
    max-width:            90ch;
  }

  .section-intro .content-text {
    text-align:           center;
    margin:               0 auto 1.2rem;
    padding:              0;
    max-width:            65ch;
    width:                100%;
  }

  .section-intro .content-text:first-child {
    margin-top: 0;
  }

  .gallery-button {
    align-self: center;
    margin-top: 1.5rem;
  }

  #about .content-header,
  #about .section-intro,
  #about .section-intro .content-text {
    text-align: center;
    margin: 0 auto;
    padding: 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap:               clamp(2.5rem, 6vw, 4rem);
    justify-items:     center;
  }

  .content-contact-form {
    width:         100%;
    max-width:     720px;
    margin:        0 auto;
    padding:       clamp(1.8rem, 4vw, 2.5rem);
  }

  .contact-social {
    text-align:    center;
    margin:        0 auto;
  }

  .contact-social .social-title {
    margin-bottom: 1.2rem;
  }

  .contact-social .social-links {
    flex-direction: row;
    justify-content: center;
    gap:            clamp(2rem, 5vw, 3.5rem);
  }

  .contact-social .social-links a {
    flex-direction: column;
    gap:            0.5rem;
  }

  .footer-container {
    grid-template-areas:
      "header"
      "nav"
      "social"
      "copyright";
    grid-template-columns: 1fr;
    row-gap:               2.5rem;
    text-align:            center;
  }

  .footer-social {
    align-items: center;
  }

  .footer-social .social-links {
    flex-direction:  row;
    justify-content: center;
    gap:             2.5rem;
  }

  .footer-social .social-links a    { font-size: 1.4rem; }
  .footer-social .social-links span { display:   none; }
  .footer-nav-links                 { display:   none; }
}

/* ≤ 480px */
@media (max-width: 480px) {
  .footer-social .social-links     { gap: 2rem; }
  .footer-social .social-links i   { font-size: 1.8rem; }

  .section-intro .content-text {
    font-size: clamp(1.05rem, 3.8vw, 1.22rem);
    line-height: 1.7;
    max-width: 70ch;
  }

  .content-contact-form {
    padding: clamp(1.5rem, 4vw, 2.2rem);
  }
}

/* ≤ 450px */
@media (max-width: 450px) {
  :root {
    --header-height: 56px;
  }

  .logo img { height: clamp(28px, 9vw, 36px); }

  .ham-menu {
    padding: 3px;
  }

  .ham-menu span {
    width:  24px;
    height: 2px;
    margin: 2px 0;
  }

  .ham-menu.active span:nth-child(1) { transform: rotate(45deg)  translate(3px,  3px); }
  .ham-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(10px, -10px); }

  .header-nav-links.active {
    gap:          1.6rem;
    padding-block: 1.2rem 2.5rem;
  }

  .header-nav-links a {
    font-size: clamp(1.4rem, 6.2vw, 1.9rem);
    padding:   0.6rem 1.5rem;
    line-height: 1.3;
  }

  .content {
    padding-inline: clamp(1rem, 5vw, 2rem);
    min-height:     100vh;
    padding-block:  clamp(2.5rem, 8vw, 4rem);
  }

  .content-header {
    font-size:     clamp(2.4rem, 11vw, 3.8rem);
    margin-bottom: 1.2rem;
  }

  .section-intro {
    padding: 1.5rem 1rem;
  }

  .section-intro .content-text {
    font-size:     clamp(1.05rem, 4.2vw, 1.28rem);
    line-height:   1.65;
    max-width:     90%;
  }

  .hero-container { min-height: 100vh; }
  .hero-header    { font-size: clamp(3.2rem, 14vw, 5.2rem); }
  .hero-text      { font-size: clamp(1.4rem, 6.5vw, 2.1rem); }

  .gallery-button,
  .submit-btn {
    font-size:     1rem;
    padding:       0.9rem 1.8rem;
    border-radius: 8px;
  }

  .contact-grid {
    gap: 2rem;
  }

  .content-contact-form {
    padding: clamp(1.2rem, 4vw, 1.8rem);
  }
}


/* ─── 15. Utilities ──────────────────────────────────────────── */
.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}


/* ─── 16. Accessibility — Reduced Motion ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }

  .hero::before,
  .section-overlay::before {
    transform: none !important;
    will-change: auto;
  }
}


/* ─── 17. Mobile Parallax — reduce effect on smaller screens ────── */
@media (max-width: 992px) {
  /* parallax still runs via JS but at reduced factor — see JS PARALLAX_FACTOR_MOBILE */
}


/* Gallery Stuff */

/* === 2. Gallery Layout === */
.gallery-container {
    display: grid;
    /* Fixed widths for side columns to ensure header has space to stick */
    grid-template-columns: 120px 1fr 120px;
    width: 100%;
    padding-top: 2rem;
    align-items: start; /* Ensures items align to top by default */
}

.gallery-content-header {
    grid-column: 1;
    justify-self: center;
    
    /* Sticky Behavior */
    position: sticky;
    top: calc(var(--header-height) + 2rem); /* clear the fixed header */
    
    /* Vertical Text Styling */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    
    color: rgba(246, 166, 178, 0.25);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 700;
    z-index: 10;
}

.images-container {
    grid-column: 2;
    max-width: 1600px;
    margin-inline: auto;
    padding-bottom: 4rem;
}

/* === 3. Masonry Grid === */
.gallery-grid {
    column-count: 4;
    column-gap: 1.5rem;
    min-height: 100vh;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.gallery-item img {
    width: 100%;
    display: block;
    height: auto;
}

/* === 4. Lightbox Overlay === */
.lightbox-overlay {
    display:         flex;           /* always flex so transitions fire */
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    align-items:     center;
    justify-content: center;
    z-index:         2000;
    opacity:         0;
    visibility:      hidden;         /* hides without blocking transitions */
    pointer-events:  none;
    transition:      opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
}

.lightbox-img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-close, .lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 24px;
    width: 44px;
    height: 44px;
    transition: background 0.2s;
}

.lightbox-close:hover, .lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.4);
}

.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* === 5. Responsive Adjustments === */
@media (max-width: 1200px) {
    .gallery-grid { column-count: 3; }
}

@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: 1fr;
        padding-inline: 1rem;
    }
    
    .gallery-content-header {
        position: relative; /* Remove sticky on mobile for better flow */
        top: 0;
        grid-column: 1;
        writing-mode: horizontal-tb;
        transform: none;
        margin-bottom: 2rem;
        text-align: center;
    }

    .images-container { grid-column: 1; }
    .gallery-grid { column-count: 1; }
}

@media (max-width: 480px) {
    .gallery-grid { column-count: 1; }
}