/* ============================================================
   PORTFOLIO — Ana Zamudio Gutiérrez
   File structure:
   1. Reset
   2. Custom properties (variables)
   3. Base
   4. Typography
   5. Navigation
   6. Hero
   7. Shared section layout
   8. Tab panels
   9. Gallery grid
   10. Gallery item
   11. About
   12. Contact
   13. Footer
   14. Lightbox overlay
   15. Artwork detail overlay
   16. Media queries (tablet 900px, mobile 480px)
   ============================================================ */


/* ============================================================
   1. RESET
   Removes default margins and padding that browsers add,
   which would cause inconsistencies across Chrome, Firefox, and Safari.
   ============================================================ */

/* box-sizing: border-box makes padding and border included in the declared width —
   this is the mental model everyone expects but browsers don't use by default */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, p, ul, li, figure, figcaption {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

/* display:block removes the 4px gap browsers add below <img>
   (treated as an inline element by default) */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}


/* ============================================================
   2. CUSTOM PROPERTIES (CSS VARIABLES)
   Centralizes all design values. To change the main color,
   just modify --color-lilac here.
   ============================================================ */

:root {
  /* --- Colors ---
     #C4B0E8 is a "dusty" lilac (65% lightness, low saturation).
     It doesn't compete visually with the artwork and passes WCAG AA contrast
     with dark text #1E1B2E. */
  --color-lilac:       #C4B0E8;
  --color-lilac-light: #EDE8F9;  /* very subtle backgrounds, hover states */
  --color-lilac-dark:  #8B72C8;  /* active nav, emphasis borders */
  --color-bg:          #FAF8FF;  /* page background: white with a slight violet tint */
  --color-bg-alt:      #F2EEF9;  /* alternating section backgrounds */
  --color-text:        #1E1B2E;  /* near-black with violet tint, harmonizes with lilac */
  --color-text-muted:  #6B6480;  /* captions, secondary text */

  /* --- Typography --- */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Type scale with 1.25 ratio (Major Third):
     gives clear hierarchy without extreme jumps */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.563rem;   /* 25px */
  --text-2xl:  1.953rem;   /* 31px */
  --text-3xl:  2.441rem;   /* 39px */
  --text-4xl:  3.052rem;   /* 49px */

  /* Spacing on a base-8 system (multiples of 8px).
     Same values used by Material Design and Apple HIG —
     produces spacing that "snaps" to common pixel densities */
  --space-1:  0.5rem;    /*  8px */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2rem;      /* 32px */
  --space-6:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-12: 6rem;      /* 96px */

  /* Layout */
  --max-width:   1200px;
  --nav-height:  70px;
  --gallery-gap: 1.5rem;
}


/* ============================================================
   3. BASE
   ============================================================ */

html {}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;  /* comfortable ratio for reading paragraphs */
}


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  /* Negative letter-spacing on large headings:
     optical adjustment — large characters have too much space by default */
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
h3 { font-size: var(--text-xl); }

p {
  max-width: 65ch;   /* 65 characters per line is the readability optimum */
  color: var(--color-text);
}

.section-intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}


/* ============================================================
   5. NAVIGATION
   ============================================================ */

.site-header {
  position: fixed;        /* Stays visible while the user scrolls */
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 100;           /* Above all page content */
  /* Semi-transparent lilac so the content underneath is slightly visible */
  background-color: rgba(196, 176, 232, 0.5);
  /* backdrop-filter: frosted glass effect over the content beneath.
     Graceful degradation: browsers that don't support it simply show
     the semi-transparent background, which also works fine */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-lilac-light);
}

.main-nav {
  display: flex;
  justify-content: space-between;  /* logo on the left, links on the right */
  align-items: center;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover {
  color: var(--color-text);
}

/* Class added by JS (Intersection Observer) to mark the active section */
.nav-links a.active {
  color: var(--color-lilac-dark);
  border-bottom-color: var(--color-lilac);
}

/* Hamburger button is hidden on desktop; JS activates it on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 2px;
}

/* The three lines of the hamburger icon, drawn with CSS */
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animation from hamburger to "X" when the menu is open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   6. HERO
   ============================================================ */

.hero {
  display: grid;
  /* Left column: minimum 340px, maximum 1 fraction of available space.
     Right column: 2 fractions (twice the left). */
  grid-template-columns: minmax(340px, 1fr) 2fr;
  grid-template-areas: "content visual";
  min-height: 100vh;
  /* padding-top compensates for the fixed nav height so content isn't hidden
     underneath the navigation bar */
  padding-top: var(--nav-height);
  background-color: var(--color-bg-alt);
}

.hero-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-3);
}

.hero-content h1 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  /* clamp(min, preferred, max): size adapts to the viewport
     without media queries — never smaller than --text-3xl
     nor larger than --text-4xl */
}

.hero-tagline {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-weight: 300;
  letter-spacing: 0.03em;
  max-width: none;
}

.hero-cta {
  display: inline-block;
  align-self: flex-start;  /* Does not stretch to the full width of the flex container */
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-lilac);
  color: var(--color-text);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.hero-cta:hover {
  background-color: var(--color-lilac-dark);
  color: white;
}

.hero-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;        /* circular mask */
  object-fit: cover;         /* fills the circle without distorting the image */
  object-position: center;
  border: 3px solid var(--color-lilac);
}

.hero-visual {
  grid-area: visual;
  overflow: hidden;  /* Clips the image so it doesn't overflow its grid cell */
}

.hero-visual img {
  width: 100%;
  height: 100%;
  /* object-fit: cover — equivalent to background-size: cover but for <img>.
     Scales the image to fill the container without distortion, cropping the excess */
  object-fit: cover;
}


/* ============================================================
   7. SHARED SECTION LAYOUT
   ============================================================ */

/* .section-inner centers and constrains the content width in all sections */
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;        /* horizontal centering */
  padding: var(--space-12) var(--space-4);
}

/* Alternating background to create visual rhythm between sections.
   Not using :nth-child because that pseudo-selector counts ALL children
   of the parent, including the nav, making the result unpredictable.
   Instead, the --alt class is assigned explicitly in the HTML. */
.gallery-section--alt,
.about-section {
  background-color: var(--color-bg-alt);
}


/* ============================================================
   8. TAB PANELS
   All sections are hidden by default. JS adds .active to the
   section whose id matches the current URL hash.
   ============================================================ */

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  /* Ensures short tabs (e.g. Contact) still fill the visible area below the nav */
  min-height: calc(100vh - var(--nav-height));
}

/* .tab-panel.active forces display:block, which overrides display:grid on .hero.
   This rule restores the grid layout when the hero panel is active. */
.hero.tab-panel.active {
  display: grid;
}


/* ============================================================
   9. GALLERY GRID
   ============================================================ */

.gallery-grid {
  display: grid;
  /* auto-fill creates as many columns as fit.
     minmax(280px, 1fr): each column has a minimum of 280px and a maximum of 1fr.
     Result: the grid is RESPONSIVE WITHOUT MEDIA QUERIES — when the viewport
     narrows, columns automatically reorganize into rows. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gallery-gap);
  margin-top: var(--space-4);
}


/* ============================================================
   9. GALLERY ITEM
   ============================================================ */

.gallery-item {
  overflow: hidden;   /* Clips the hover zoom effect within the rounded border */
  border-radius: 4px;
  background-color: var(--color-lilac-light);  /* visible while the image loads */
}

.gallery-link {
  display: block;
}

.gallery-item img {
  width: 100%;
  /* aspect-ratio enforces uniform proportions across all thumbnails.
     Without this, images with different original proportions break the grid alignment */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);       /* Subtle zoom — 1.04 not 1.1, to keep it elegant */
  filter: brightness(0.92);     /* Slightly darkens to indicate "this is clickable" */
}

.gallery-caption {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Video thumbnails: same sizing rules as the <img> thumbnails above */
.gallery-thumb-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery-item:hover .gallery-thumb-video {
  transform: scale(1.04);
  filter: brightness(0.92);
}

/* Play icon badge on video cards, drawn with a CSS pseudo-element */
.gallery-item.video-item .gallery-link {
  position: relative;
}

.gallery-item.video-item .gallery-link::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  /* Center the circle over the thumbnail */
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.42);
  color: white;
  font-size: 1.25rem;
  /* line-height == height centers the glyph vertically without flexbox */
  line-height: 52px;
  text-align: center;
  pointer-events: none;   /* don't block the click on the link */
  transition: background-color 0.2s ease;
}

.gallery-item.video-item:hover .gallery-link::after {
  background-color: rgba(0, 0, 0, 0.65);
}


/* ============================================================
   10. ABOUT
   ============================================================ */

.about-inner {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.about-photo {
  /* flex: 0 0 320px — the three values are flex-grow flex-shrink flex-basis.
     grow:0 and shrink:0 means this element always occupies exactly 320px,
     neither growing nor shrinking. The text takes the remaining space. */
  flex: 0 0 320px;
}

.about-photo img {
  width: 100%;
  border-radius: 2px;
  /* Slight desaturation so the portrait doesn't compete visually with the artwork */
  filter: grayscale(10%);
}

.about-text {
  flex: 1;  /* Takes all available space after the photo */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.about-text h2 {
  margin-bottom: 0;
}

.about-details {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}


/* ============================================================
   11. CONTACT
   ============================================================ */

.contact-section {
  /* No global text-align: center — the bio/photo layout is left-aligned like About */
}

/* Two-column layout: photo on the left, bio + links on the right */
.contact-inner {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.contact-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-body h2 {
  margin-bottom: 0;
}

.contact-intro {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin: 0 auto var(--space-6);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-lilac);
  border-radius: 24px;  /* pill shape */
  font-size: var(--text-base);
  font-weight: 400;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-link:hover {
  background-color: var(--color-lilac);
  color: var(--color-text);
}

.contact-icon {
  font-size: 1.1em;
  display: inline-flex;
  align-items: center;
}

/* SVG brand logo inside the icon span */
.contact-icon img {
  width: 1.1em;
  height: 1.1em;
  /* Prevent the image from shrinking the pill button vertically */
  display: block;
}


/* ============================================================
   12. FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-text);  /* dark background to visually separate the footer */
  color: var(--color-bg);
  text-align: center;
  padding: var(--space-4);
  font-size: var(--text-sm);
}

.site-footer p {
  color: var(--color-bg);
  max-width: none;
  opacity: 0.7;
}


/* ============================================================
   13. LIGHTBOX OVERLAY
   ============================================================ */

.lightbox-overlay {
  /* display:none by default; JS adds .open to switch to display:flex */
  display: none;
  position: fixed;
  /* inset: 0 is modern shorthand for top:0; right:0; bottom:0; left:0.
     Covers the entire browser window.
     Note: inset doesn't work in IE11, but IE11 is out of support. */
  inset: 0;
  background-color: rgba(0, 0, 0, 0.88);
  z-index: 200;      /* above the nav (z-index 100) */
  justify-content: center;
  align-items: center;
}

.lightbox-overlay.open {
  display: flex;
}

.lightbox-img {
  /* max-width/height with vh/vw so the image never overflows the screen */
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;  /* scales without cropping — we want to see the full image */
  border-radius: 2px;
}

.lightbox-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--text-xl);
  opacity: 0.7;
  transition: opacity 0.2s ease;
  border-radius: 50%;
}

.lightbox-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   15. ARTWORK DETAIL OVERLAY
   Richer modal for gallery items with data-id.
   Shows title, description, and multiple stacked images.
   ============================================================ */

.artwork-overlay {
  /* Hidden by default; JS adds .open to show it */
  display: none;
  position: fixed;
  inset: 0;                              /* covers the full viewport */
  background-color: rgba(0, 0, 0, 0.78);
  z-index: 200;
  justify-content: center;
  align-items: flex-start;              /* panel aligns to top so long content scrolls naturally */
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
}

.artwork-overlay.open {
  display: flex;
}

.artwork-panel {
  position: relative;                   /* anchor for the close button */
  background-color: var(--color-bg);
  border-radius: 8px;
  max-width: 960px;
  width: 100%;
  padding: var(--space-6);
}

.artwork-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.artwork-close:hover {
  background-color: var(--color-lilac-light);
  color: var(--color-text);
}

.artwork-header {
  /* Keep title/description away from the close button */
  padding-right: var(--space-6);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-lilac-light);
}

.artwork-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.artwork-description {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.65;
}

.artwork-figure {
  margin-bottom: var(--space-4);
}

.artwork-figure:last-child {
  margin-bottom: 0;
}

.artwork-figure img {
  /* Override the global img rule (height: auto) is already inherited */
  width: 100%;
  border-radius: 4px;
  display: block;
}

.artwork-figure figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Local MP4 video inside the artwork overlay */
.artwork-video {
  width: 100%;
  border-radius: 4px;
  display: block;
  /* Let the video control its own aspect ratio; max-height prevents
     very tall portrait videos from overflowing the panel */
  max-height: 75vh;
}

/* YouTube embed: padding-top trick locks a 16:9 aspect ratio at any width.
   The iframe is stretched to fill this container absolutely. */
.artwork-video-wrapper {
  position: relative;
  padding-top: 56.25%;   /* 9 / 16 = 56.25% */
  overflow: hidden;
  border-radius: 4px;
}

.artwork-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ============================================================
   16. MEDIA QUERIES
   Desktop-first: base rules describe the desktop layout.
   Here we progressively simplify for smaller screens.
   ============================================================ */

/* --- TABLET (≤ 900px) --- */
@media (max-width: 900px) {
  /* Hero switches from 2 columns to 1: image on top, text below */
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "content";
    min-height: auto;
  }

  .hero-visual {
    /* Fixed height so the image doesn't fill the entire screen */
    height: 50vh;
    min-height: 280px;
  }

  .hero-content {
    padding: var(--space-6) var(--space-4);
  }

  /* About / Contact sections switch from horizontal to vertical layout */
  .about-inner,
  .contact-inner {
    flex-direction: column;
    align-items: center;
  }

  .about-photo {
    flex: 0 0 auto;
    width: 60%;
    max-width: 300px;
  }

  .about-text,
  .contact-body {
    text-align: center;
    align-items: center;
  }

  .about-details {
    justify-content: center;
  }

  .contact-links {
    justify-content: center;
  }
}

/* --- MOBILE (≤ 480px) --- */
@media (max-width: 480px) {
  /* Nav links are hidden; they appear as a vertical menu when the hamburger is pressed */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    background-color: rgba(250, 248, 255, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-lilac-light);
    padding: var(--space-2) 0;
  }

  /* JS adds .open to .nav-links to show the menu */
  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: var(--space-2) var(--space-4);
    border-bottom: none;
    font-size: var(--text-base);
  }

  /* Show the hamburger button (hidden by default on desktop) */
  .nav-toggle {
    display: flex;
  }

  .hero-content {
    padding: var(--space-4) var(--space-3);
  }

  .section-inner {
    padding: var(--space-8) var(--space-3);
  }

  .about-photo {
    width: 80%;
  }

  /* On mobile the gallery grid switches to a single column if images
     no longer fit the 280px minimum (auto-fill handles it automatically,
     but below ~320px viewport we need to force it) */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .contact-links {
    flex-direction: column;
    align-items: center;
  }
}