/* ==========================================================================
   LAYOUT: desktop and mobile are set separately.
   - Edit the DESKTOP block to change the desktop layout.
   - Edit the MOBILE block to change phones. It only overrides what it lists,
     so anything you remove from it falls back to the desktop value.
   Settings marked "keyword" take one of the words listed; all others are sizes/numbers.
   ========================================================================== */

/* ===== DESKTOP (default, every screen wider than the mobile breakpoint) ===== */
:root {
  /* Page */
  --page-max-width: 1180px;           /* widest the content gets */
  --page-gutter: 32px;                /* space at the left/right screen edges */
  --section-space: 88px;              /* vertical space above/below each section */
  --content-width: 900px;             /* width of project case-study text */

  /* Header */
  --header-height: 76px;
  --nav-mode: inline;                 /* keyword: inline (links in a row) | menu (hamburger button) */
  --show-subtitle: yes;               /* keyword: yes | no. "Game Designer" under your name */
  --brand-size: 1.7rem;               /* your name in the header */
  --logo-size: 46px;                  /* logo image left of your name (0 hides it) */
  --logo-radius: 12px;                /* 50% = circle, 0 = square */

  /* Pinned email/social icons (bottom corner, every page) */
  --dock-position: column;            /* keyword: column (vertical, bottom-right) | row (centred along the bottom) */
  --dock-size: 44px;                  /* icon button size */
  --dock-gap: 4px;                    /* space between icons */
  --dock-padding: 6px;                /* padding inside the panel */
  --dock-offset: 20px;                /* distance from the screen edges */
  --dock-clearance: 24px;             /* space under the page so nothing hides behind the panel */
  /* Strip reserved down the right-hand side so the panel never covers content.
     Set to 0px only if you also move the panel (--dock-position: row). */
  --dock-side-clearance: calc(var(--dock-size) + 2 * var(--dock-padding) + var(--dock-offset) + 12px);

  /* Text sizes */
  --text-base: 17px;                  /* body text; everything else scales from this */
  --title-hero: 3.4rem;               /* "Hey there!" */
  --title-section: 2.4rem;            /* "Professional Projects" */
  --title-card: 1.45rem;              /* project names on cards */
  --title-project: 3.6rem;            /* project page title */

  /* Showreel (top of the home page) */
  --showreel-max-width: 1100px;       /* widest the video gets */
  --showreel-space: 40px;             /* space above it */
  --showreel-gap: 20px;               /* space between it and the About section */

  /* About / intro */
  --about-layout: row;               /* keyword: row (photo beside text) | stacked (photo above) */
  --about-photo-size: 260px;
  --about-photo-radius: 50%;          /* 50% = circle, 16px = rounded square, 0 = square */
  --about-photo-align: start;         /* start (left) | center. Only matters when stacked */
  --about-read-more: off;             /* keyword: on | off. Shows only the first paragraph, with a "Read more" link */

  /* Project grids */
  --grid-columns: 3;                  /* cards per row */
  --grid-gap: 28px;
  --card-style: vertical;             /* keyword: vertical (image on top) | horizontal (image beside text) */
  --card-image-ratio: 16 / 9;         /* shape of card images (vertical cards) */
  --card-image-width: 42%;            /* image width (horizontal cards) */
  --show-card-summary: yes;           /* keyword: yes | no */
  --show-filters: yes;                /* keyword: yes | no. The tag filter buttons */

  /* Featured layout: the project marked "featured" shown large, with the next
     two stacked beside it, and the rest behind a "Show more" button. */
  --featured-layout: hero;            /* keyword: hero | grid (grid = all cards the same size) */
  --hero-max-width: 100%;             /* width of the featured block (100% = same as the rows below) */
  --hero-height: 640px;               /* height of the featured block (auto = size to content) */
  --hero-split: 1.5fr 1fr;            /* width of the big card vs the stacked pair */
  --hero-image-ratio: 16 / 9;         /* big card's image */
  --hero-side-image-min: 72px;        /* shortest the stacked cards' images get */
  --title-card-hero: 1.7rem;          /* big card's title */
  --card-summary-lines: 3;            /* summary lines before "…" (keeps card heights even) */
  --hero-side-summary-lines: 2;       /* …on the two cards stacked beside the featured one */
  --more-peek: 104px;                 /* how much of the hidden cards peeks out */
  --more-fade: 72px;                  /* height of the fade over the peeking cards */

  /* Project pages */
  --project-header-layout: row;       /* keyword: row (tags beside the title) | stacked (below it) */
  --project-media: row;               /* keyword: row (store buttons right of the video) | stacked (below it) */
  --download-columns: 2;              /* download buttons per row (2 = a 2x2 grid).
                                         The panel's own size follows the button count. */
  --store-btn-height: 44px;           /* download buttons stay this size whatever the panel does */
  --store-btn-width: 175px;
  --project-video-width: 560px;       /* video at the top of a project page */
  --project-media-space: 40px;        /* space below the video before the case-study section */
  --band-space: 44px;                 /* padding inside each coloured case-study band */
  --content-sections: tabs;           /* keyword: tabs (one section with a Responsibilities/Case Study
                                         toggle) | bands (the old stacked coloured sections) */
  --segments: auto;                   /* keyword: auto (toggle sized to its text) | full (spans the width) */
  --split-layout: side-by-side;       /* keyword: side-by-side | stacked. Text + image sections */
  --split-image-width: 45%;           /* image column width in side-by-side sections */
  --gallery-columns: 3;
  --project-nav-columns: 2;           /* previous/next buttons: 2 = side by side, 1 = stacked */

  /* Effects */
  --hover-effects: on;                /* keyword: on | off */
  --scroll-reveal: on;                /* keyword: on | off. Fade/slide in on scroll */
}

/* ===== MOBILE (screens 768px wide or narrower) =====
   To change the breakpoint, edit the number in the line below. */
@media (max-width: 768px) {
  :root {
    --page-gutter: 16px;
    --section-space: 56px;

    --header-height: 64px;
    --nav-mode: menu;
    --show-subtitle: yes;
    --brand-size: 1.35rem;
    --logo-size: 36px;

    --dock-position: row;             /* a bar along the bottom instead of a corner stack */
    --dock-size: 40px;
    --dock-offset: 10px;
    --dock-clearance: 64px;           /* keeps the last content above the bar */
    --dock-side-clearance: 0px;

    --text-base: 16px;
    --title-hero: 2.4rem;
    --title-section: 1.8rem;
    --title-card: 1.3rem;
    --title-project: 2.3rem;

    --showreel-space: 16px;
    --showreel-gap: 12px;

    --about-layout: stacked;
    --about-photo-size: 150px;
    --about-photo-align: center;
    --about-read-more: on;

    --grid-columns: 1;
    --grid-gap: 20px;
    --card-style: vertical;
    --show-card-summary: yes;
    --show-filters: no;

    --featured-layout: grid;          /* one column on a phone, so all cards match */
    --hero-max-width: 100%;
    --hero-height: auto;              /* cards size to their content in one column */
    --title-card-hero: 1.4rem;
    --card-summary-lines: 4;
    --more-peek: 76px;
    --more-fade: 56px;

    --project-header-layout: stacked;
    --project-media: stacked;
    --download-columns: 2;
    --store-btn-height: 42px;
    --store-btn-width: 170px;
    --project-video-width: 100%;
    --project-media-space: 28px;
    --band-space: 32px;
    --segments: full;
    --split-layout: stacked;
    --gallery-columns: 2;
    --project-nav-columns: 1;

    --hover-effects: off;             /* touch screens have no hover */
    --scroll-reveal: on;
  }
}

/* ===== TABLET (optional) =====
   Remove the two comment markers (the slash-star and star-slash lines) around this block to give tablets their own layout. */
/*
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --grid-columns: 2;
    --nav-mode: inline;
    --about-photo-size: 200px;
    --title-hero: 2.8rem;
  }
}
*/