/* =====================================================================
   portfolio.css
   Styles for the Medical Illustration portfolio page (portfolio.html).

   This file contains THREE layout patterns you can mix and match:
     Layout A (.layout-stacked)     — top image, title, bottom image, description
     Layout B (.layout-sidebyside)  — large title, image LEFT + description RIGHT
     Layout C (.layout-hero-thumbs) — hero image, title, two thumbs, description

   To change a layout's look, find its section below and edit the values there.
   ===================================================================== */


/* =====================================================================
   SHARED PAGE CHROME
   (top bar, main wrapper, page title — used by all layouts)
   ===================================================================== */

/* --- PAGE TOP BAR: back link + section label --- */
.page-topbar {
  display: flex;
  /* Puts the back link and label side by side horizontally. */

  align-items: center;
  /* Vertically centers both items within the bar. */

  justify-content: space-between;
  /* Pushes back link to the left edge, label to the right edge. */

  padding: 12px 40px;
  /* Inner spacing: 12px top/bottom, 40px left/right.
     Reduce 40px for less side space on narrow layouts. */

  border-bottom: 1px solid #C2ADA5;
  /* Subtle dividing line below the top bar.
     Change color or remove entirely (set to "none") as desired. */

  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.back-link {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s;
  /* Smooth fade on hover. Change 0.2s to slow or speed up the transition. */
}

.back-link:hover {
  opacity: 0.6;
  /* How transparent the link gets on hover. 0 = invisible, 1 = no change. */
}

.page-label {
  font-weight: 600;
  opacity: 0.7;
  /* Slightly faded so it doesn't compete with the page content. */
}


/* --- MAIN CONTENT WRAPPER --- */
.portfolio-main {
  max-width: 1500px;
  /* How wide the content column gets on large screens. */

  margin: 0 auto;
  /* Centers the column. Keep this. */

  padding: 40px 24px 80px;
  /* 40px top gap, 24px sides, 80px bottom breathing room.
     Adjust the side value (24px) to control how close content gets to screen edges. */
}


/* --- PAGE SECTION TITLE (e.g. "Medical Illustration") --- */
.portfolio-title {
  font-family: var(--font-display);

  font-size: clamp(2.2rem, 6vw, 3.5rem);
  /* Responsive size. Max (3.5rem) can be increased for a larger title.
     clamp() means it scales between min and max depending on screen size. */

  font-weight: 400;
  text-align: center;

  margin: 0 0 24px 0;
  /* Space below the page title before the first project block.
     Increase for more breathing room. */
}

/* --- PROJECT BLOCK WRAPPER (wraps one complete project, any layout) --- */
.project-block {
  margin-bottom: 88px;
  /* Vertical space between consecutive project blocks.
     Increase for more breathing room between projects. */
}


/* =====================================================================
   SHARED IMAGE & DESCRIPTION COMPONENTS
   (used by multiple layouts)
   ===================================================================== */

/* --- IMAGE FRAME: the bordered rectangle around each image --- */
.img-frame {
  overflow: clip;
  /* Clips the image if it overflows the frame shape. Keep this. */
}

/* --- IMAGE ELEMENT inside any frame --- */
.project-img {
  width: 100%;
  /* Fills the frame width. */

  height: 100%;
  /* Fills the frame height. */

  object-fit: contain;
  /* Crops to fill without stretching. Change to "contain" to show the whole image
     with blank space on the sides instead. */

  display: block;
  /* Removes the default small gap that appears below inline images. Keep this. */
}


/* --- PROJECT DESCRIPTION TEXT (shared by layouts A and C) --- */
.project-desc {
  margin-top: 20px;
  /* Space above the description block. */

  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.15rem);

  line-height: 1.65;
  color: var(--color-text);
}

.project-desc p {
  margin: 0 0 10px 0;
  /* Space between each description paragraph. Increase to 16px for more space. */
}

.project-desc strong {
  font-weight: 600;
  /* Bold labels like "Software used:". Change to 700 for heavier bold. */
}


/* --- PROJECT NAME (title shared across layouts, with size variant) --- */
.project-name {
  font-family: var(--font-display);

  font-size: clamp(1.3rem, 3.5vw, 2.5rem);
  /* Default project title size. Used in Layout A and C.
     Adjust the max (2.5rem) to scale up/down. */

  font-weight: 400;
  text-align: center;
  margin: 20px 0;
  /* Space above and below the title. */

  color: var(--color-text);
}

.project-name--large {
  /* Modifier for Layout B where the title is extra large and bold above the image.
     Add class="project-name project-name--large" to an <h2> to use this style. */
  font-size: clamp(1.3rem, 3.5vw, 2.5rem);
  /* Larger responsive size. Adjust the max to make it bigger. */

  font-weight: 400;
  /* Full bold for the large layout B title. Change to 400 for normal weight. */

  margin: 0 0 28px 0;
  /* More space below the large title before the image row. */
}


/* =====================================================================
   LAYOUT A: STACKED
   Structure: [top image] → [title] → [bottom image] → [description]
   Use class="project-block layout-stacked" on the <article> element.
   ===================================================================== */

/* Top image (smaller, portrait) */
.layout-stacked .img-frame--top {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* Controls the shape of the top image box.
     "4 / 3" is a classic photo shape. Change to "1 / 1" for square, "16 / 9" for wide. */

  margin-bottom: 16px;
  /* Space between this image and the project title below it. */
}

/* Bottom image (wider, landscape) */
.layout-stacked .img-frame--bottom {
  width: 80%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  /* Wide landscape ratio for the bottom image.
     Change to "4 / 3" for a taller bottom image. */

  margin-top: 0;
  /* The title above provides spacing; no extra top margin needed. */
}


/* =====================================================================
   LAYOUT B: SIDE-BY-SIDE
   Structure: [large centered title] → [image LEFT | description RIGHT]
   Use class="project-block layout-sidebyside" on the <article> element.
   ===================================================================== */

/* The flex row that holds the image (left) and description (right) */
.sidebyside-row {
  display: flex;
  /* Places the image column and description column side by side. */

  align-items: flex-start;
  /* Aligns both columns to the top so they don't stretch to equal height.
     Change to "center" to vertically center both columns relative to each other. */

  gap: 36px;
  /* Horizontal space between the image and description.
     Increase for more breathing room between them. */
}

/* Left column: image wrapper */
.sidebyside-img-wrap {
  flex: 0 0 60%;
  /* The image column takes up 60% of the row width and won't grow or shrink.
     Increase for a larger image, decrease for a smaller one. */
}

/* The image frame inside the left column */
.layout-sidebyside .img-frame--sidebyside {
  width: 100%;
  /* Fills the left column. */

  aspect-ratio: 3 / 4;
  /* Portrait ratio — taller than wide, good for still life / figure drawings.
     Change to "1 / 1" for square, "4 / 3" for landscape. */
}

/* Right column: description text */
.sidebyside-desc {
  flex: 1;
  /* Takes up all remaining space to the right of the image.
     The image column is fixed at 52%, so this fills the other ~48%. */

  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  /* Description font size. Change to 1rem for standard body text size. */

  line-height: 1.7;
  color: var(--color-text);

  padding-top: 8px;
  /* Small top offset to align description text with the top of the image.
     Adjust if the text feels too high or low relative to the image. */
}

.sidebyside-desc p {
  margin: 0 0 32px 0;
  /* Space between each description paragraph on the right side.
     Increase to for more space between lines. */
}

.sidebyside-desc strong {
  font-weight: 600;
}


/* =====================================================================
   LAYOUT C: HERO + TWO THUMBNAILS
   Structure: [large hero image] → [title] → [thumb LEFT | thumb RIGHT] → [description]
   Use class="project-block layout-hero-thumbs" on the <article> element.
   ===================================================================== */

/* Hero image: large full-width image at the top */
.layout-hero-thumbs .img-frame--hero {
  width: 90%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  /* Title below provides spacing. */
}

/* Two thumbnail images side by side */
.thumbs-row {
  display: grid;
  /* CSS grid lays out the thumbnails in columns. */

  grid-template-columns: repeat(2, 1fr);
  /* Creates 2 equal-width columns — one per thumbnail.
     To add a third thumbnail: change to "repeat(3, 1fr)" and add a third .img-frame--thumb. */

  gap: 16px;
  /* Space between the two thumbnails.
     Increase for more gap, decrease for less. */

  margin-top: -15px;
  /* Title above provides spacing; adjust here if you need more. */
}

/* Each thumbnail frame */
.layout-hero-thumbs .img-frame--thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* Shape of each thumbnail. Change to "1 / 1" for square thumbnails. */
}


/* =====================================================================
   RESPONSIVE: MOBILE ADJUSTMENTS
   Rules that only apply on narrow screens (phones, small tablets).
   ===================================================================== */

@media (max-width: 768px) {
  /* Applies when the screen is 768px wide or narrower.
     Change 768px to 640px to exclude larger tablets. */

  .page-topbar {
    padding: 10px 16px;
    /* Tighter side padding on phones. */
  }

  .portfolio-main {
    padding: 28px 16px 60px;
    /* Less padding on mobile. */
  }

  /* Layout B: stack image and description vertically on mobile */
  .sidebyside-row {
    flex-direction: column;
    /* Switches from side-by-side to stacked on mobile. */

    gap: 20px;
    /* Less gap when stacked. */
  }

  .sidebyside-img-wrap {
    flex: none;
    /* Remove the fixed 52% width. */

    width: 100%;
    /* Full width on mobile. */
  }

  /* Layout C: stack thumbnails vertically on very small screens */
  .thumbs-row {
    grid-template-columns: 1fr;
    /* One thumbnail per row on small screens.
       Remove this rule to keep them side-by-side even on mobile. */
  }
}