/* ============================================================
   eaglehorse.net — Root Landing Page Styles
   File: css/style.css
   Theme: Western USA Mountain Meadow
   Palette: Deep sky blue, gold, charcoal
   ============================================================

   HOW CSS WORKS (quick reference):
   ─────────────────────────────────
   A CSS rule looks like this:

     selector {
       property: value;
     }

   selector  = which HTML element(s) to style
               .classname  targets elements with that class
               #idname     targets the element with that id
               element     targets all tags of that type (e.g. body, h1)
               a:hover     targets <a> tags when the mouse is over them
               x::before   creates a "virtual" element before x's content

   property  = what to change (color, font-size, padding, etc.)
   value     = the new setting for that property

   CSS is read top to bottom. Later rules override earlier ones
   when they target the same element and property.
   ============================================================ */


/* ── Google Fonts ─────────────────────────────────────────────
   @import loads external fonts from Google's font library.
   These two fonts are used throughout the page:
     Playfair Display = elegant serif font for headings and titles
     Raleway          = clean sans-serif font for body text and labels
   wght=400;700;900 loads three weights: normal, bold, and extra-bold.
   wght=300;400;500;600 loads four weights for Raleway.
   The browser downloads these from Google when the page loads.
──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Raleway:wght@300;400;500;600&display=swap');


/* ════════════════════════════════════════════════════════════
   CSS VARIABLES  (Custom Properties)
   ──────────────────────────────────────────────────────────
   :root targets the root of the document (effectively the whole page).
   Variables defined here are available everywhere in the stylesheet.

   SYNTAX:  --variable-name: value;
   USAGE:   color: var(--variable-name);

   WHY USE VARIABLES?
   If you want to change the main blue color, you change it in ONE
   place here, and every element using var(--sky) updates automatically.
   Without variables, you would have to find and change every single
   hex code scattered throughout the file.

   TO CUSTOMIZE THE COLOR SCHEME:
   Change the hex codes (#xxxxxx) next to the color variables below.
   Use a free color picker at coolors.co or htmlcolorcodes.com.
════════════════════════════════════════════════════════════ */
:root {
  /* ── Color palette ─────────────────────────────────────── */
  --sky:          #0e6ba8;   /* Main blue — used for headings, buttons, highlights */
  --sky-light:    #1a8fd1;   /* Lighter blue — button gradients, hover states */
  --sky-deep:     #073d6e;   /* Dark blue — used in gradients and deep backgrounds */
  --gold:         #c9922a;   /* Main gold — accents, highlights */
  --gold-light:   #e8b84b;   /* Lighter gold — hover states, divider lines */
  --gold-pale:    #f5e6c2;   /* Very pale gold — code tag backgrounds */
  --charcoal:     #1e1e24;   /* Near-black — primary text color */
  --charcoal-mid: #2e2e38;   /* Mid dark — used in coming-soon card elements */
  --charcoal-soft:#3d3d4d;   /* Softer dark — card stripes for coming-soon */
  --cream:        #f8f4ed;   /* Warm off-white — base page background */
  --white:        #ffffff;   /* Pure white — card backgrounds */
  --text-main:    #1e1e24;   /* Primary text color (same as charcoal) */
  --text-muted:   #5a5a72;   /* Secondary text — descriptions, captions */

  /* ── Typography ────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  /* ↑ Font stack: tries Playfair Display first. If unavailable, falls back
     to Georgia (built-in serif), then any serif font the browser has.
     Used for: page title, section headings, card titles */

  --font-body: 'Raleway', 'Segoe UI', sans-serif;
  /* ↑ Font stack: tries Raleway, falls back to Segoe UI (Windows default),
     then any sans-serif font.
     Used for: all body text, labels, buttons */

  /* ── Border radius ─────────────────────────────────────── */
  --radius-sm:  6px;    /* Small rounding — code tags, small badges */
  --radius-md:  12px;   /* Medium rounding — buttons, notice boxes */
  --radius-lg:  20px;   /* Large rounding — cards, banner */

  /* ── Shadows ───────────────────────────────────────────── */
  /* Option A (Session 18): elevated card shadow — tight close layer + wide ambient layer */
  --shadow-card: 2px 4px 8px rgba(0,0,0,0.32), 6px 12px 32px rgba(0,0,0,0.16);
  /* ↑ Two-layer shadow: a large soft blue glow + a small dark shadow.
     rgba(r,g,b,a) = red, green, blue, alpha (opacity 0–1) */

  --shadow-gold: 0 0 0 2px var(--gold-light);
  /* ↑ A 2px gold outline used as a focus/highlight ring */

  /* ── Transition ────────────────────────────────────────── */
  --transition: 0.3s ease;
  /* ↑ Standard animation duration for hover effects.
     0.3s = 300 milliseconds. 'ease' = starts fast, slows down.
     Used like: transition: color var(--transition); */
}


/* ════════════════════════════════════════════════════════════
   RESET & BASE STYLES
   ──────────────────────────────────────────────────────────
   Browsers have their own default styles that vary between
   Chrome, Firefox, Safari, etc. This section overrides those
   defaults to create a consistent starting point.
════════════════════════════════════════════════════════════ */

/* Universal selector: applies to EVERY element on the page.
   box-sizing: border-box means padding and border are included
   in an element's width/height — makes layout math much simpler.
   margin: 0 and padding: 0 remove all default spacing. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* scroll-behavior: smooth makes anchor links (like #section)
   scroll gradually instead of jumping instantly. */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-main);
  min-height: 100vh;      /* ensures the body is at least the full viewport height */
  overflow-x: hidden;     /* prevents horizontal scrollbar from appearing */
}


/* ════════════════════════════════════════════════════════════
   FULL-PAGE BACKGROUND GRADIENT
   ──────────────────────────────────────────────────────────
   body::before and body::after are "pseudo-elements" — virtual
   elements the browser creates automatically. They don't exist
   in the HTML but can be styled like real elements.
   content: '' is required for pseudo-elements to appear at all
   (even if the content is empty).
   position: fixed means they stay in place even when scrolling.
════════════════════════════════════════════════════════════ */

/* The sky-to-meadow gradient that fills the entire viewport */
body::before {
  content: '';
  position: fixed;    /* fixed = stays in same place when page scrolls */
  inset: 0;           /* inset: 0 is shorthand for top:0 right:0 bottom:0 left:0 */
  background: linear-gradient(
    175deg,           /* angle: nearly vertical, very slight tilt */
    #b8d8f0 0%,       /* pale sky blue at the top */
    #d6eaf8 25%,      /* lighter blue */
    #e8f4f0 50%,      /* blue-green transition */
    #f0e8d0 75%,      /* warm sandy tone */
    #f8f4ed 100%      /* cream at the bottom (matches --cream) */
  );
  z-index: -2;        /* behind everything else on the page */
}

/* Soft green meadow/tree shapes at the bottom of the viewport.
   Four overlapping radial gradients simulate a treeline silhouette. */
body::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background:
    /* each radial-gradient creates one soft green hill/tree mass */
    /* format: radial-gradient(shape size at x% y%, color stop, color stop) */
    radial-gradient(ellipse 60% 80px at 15% 100%, #4a7c59 0%, transparent 70%),
    radial-gradient(ellipse 40% 60px at 40% 100%, #3d6b4a 0%, transparent 70%),
    radial-gradient(ellipse 50% 70px at 70% 100%, #4a7c59 0%, transparent 70%),
    radial-gradient(ellipse 35% 50px at 90% 100%, #3d6b4a 0%, transparent 70%);
  z-index: -1;          /* above body::before (-2) but behind all content (0+) */
  pointer-events: none; /* mouse clicks pass through this element — it is decorative */
  opacity: 0.35;        /* 35% opaque — subtle, not distracting */
}


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.site-header {
  position: relative;   /* needed so .site-header::before can position inside it */
  padding: 3.5rem 2rem 2rem;
  text-align: center;
  overflow: hidden;     /* clips any child elements that extend beyond the header box */
}

/* Subtle blue gradient wash at the bottom of the header area */
.site-header::before {
  content: '';
  position: absolute;   /* absolute = positioned relative to nearest 'position: relative' parent */
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, transparent 0%, rgba(14,107,168,0.06) 100%);
  /* Fades from fully transparent (top) to very faint blue (bottom) */
  z-index: 0;
}

/* Inner wrapper — sits above the ::before gradient */
.site-header__inner {
  position: relative;
  z-index: 1;   /* z-index layers: higher numbers are in front. 1 > 0 (the ::before layer) */
}

/* Small uppercase text above the main title */
.site-header__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;   /* wide spacing between letters for an all-caps label feel */
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.75rem;
  opacity: 0;   /* starts invisible — the animation fades it in */
  animation: fadeSlideUp 0.7s 0.1s ease forwards;
  /* fadeSlideUp: name of the @keyframes animation defined near the bottom of this file
     0.7s:       duration — the animation takes 0.7 seconds
     0.1s:       delay — waits 0.1 seconds before starting
     ease:       timing — starts fast, decelerates
     forwards:   after the animation ends, the element stays at the final keyframe state
                 (without 'forwards', it would snap back to opacity:0) */
}

/* Main site title: eaglehorse.net */
.site-header__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  /* clamp(minimum, preferred, maximum):
     On small screens: never smaller than 2.8rem
     On medium screens: scales with viewport width (7vw = 7% of screen width)
     On large screens: never larger than 5.5rem
     This creates fluid, responsive typography without media queries. */
  font-weight: 900;       /* extra bold */
  line-height: 1.05;      /* tight line height for large display text */
  color: var(--charcoal);
  letter-spacing: -0.02em; /* very slightly tighter than normal — a design choice for large text */
  opacity: 0;
  animation: fadeSlideUp 0.7s 0.25s ease forwards; /* 0.25s delay — appears after eyebrow */
}

/* The "eagle" part of the title — styled blue */
.site-header__title span {
  color: var(--sky);
  display: inline-block;  /* needed so CSS transforms work correctly on inline text */
}

/* The "horse" part of the title — styled gold
   (Note: <em> is used as a styling hook here, not for italic emphasis.
    font-style: normal cancels the default italic behavior of <em>.) */
.site-header__title em {
  font-style: normal;
  color: var(--gold);
}

/* The short description below the title */
.site-header__tagline {
  margin-top: 1rem;
  font-size: clamp(1rem, 2.2vw, 1.25rem); /* fluid size, same clamp technique as title */
  font-weight: 300;   /* light weight for a gentle, airy feel */
  color: var(--text-muted);
  letter-spacing: 0.03em;
  max-width: 520px;     /* limits line length for readability — long lines are hard to read */
  margin-left: auto;    /* auto left+right margins center a block element */
  margin-right: auto;
  opacity: 0;
  animation: fadeSlideUp 0.7s 0.4s ease forwards; /* 0.4s delay — appears after title */
}


/* ════════════════════════════════════════════════════════════
   HERO IMAGE BANNER
   ──────────────────────────────────────────────────────────
   The wide image/placeholder area below the title.
════════════════════════════════════════════════════════════ */
.image-banner {
  position: relative;   /* so child elements can use position: absolute inside it */
  margin: 0 auto;       /* horizontally center the banner */
  max-width: 900px;     /* never wider than 900px */
  height: 220px;
  border-radius: var(--radius-lg);  /* rounded corners */
  overflow: hidden;     /* clips children to the rounded corner shape */
  display: flex;
  align-items: center;      /* vertically center the placeholder text */
  justify-content: center;  /* horizontally center the placeholder text */
  background: linear-gradient(135deg, var(--sky-deep) 0%, var(--sky) 45%, var(--sky-light) 100%);
  /* ↑ This blue gradient is the PLACEHOLDER background.
     ─────────────────────────────────────────────────────────────────────
     TO ADD A REAL PHOTO, replace the background line above with:
       background-image: url('../images/hero-horses-eagles.jpg');
       background-size: cover;
       background-position: center;
     Note the  ../  before images/ — because style.css is inside the css/ folder,
     paths to the images/ folder need to go UP one level first: ../images/
     ───────────────────────────────────────────────────────────────────── */
  box-shadow: var(--shadow-card);
  /* Option A (Session 18): gold border matches the elevated card treatment */
  border: 3px solid var(--gold);
  opacity: 0;
  animation: fadeSlideUp 0.7s 0.55s ease forwards; /* 0.55s delay — last element to appear */
  margin-top: 2rem;
}

/* Placeholder text container (centered inside the banner) */
.image-banner__placeholder {
  text-align: center;
  color: rgba(255,255,255,0.85); /* white at 85% opacity */
  padding: 1.5rem;
}

.image-banner__placeholder-icon {
  font-size: 2.8rem;
  display: block;     /* block makes it sit on its own line */
  margin-bottom: 0.5rem;
}

.image-banner__placeholder-text {
  font-size: 0.85rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
  max-width: 400px;
  opacity: 0.9;
}

/* The dashed hint box showing the filename to use */
.image-banner__placeholder-hint {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  background: rgba(255,255,255,0.15);  /* semi-transparent white tint */
  border: 1px dashed rgba(255,255,255,0.5);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  letter-spacing: 0.08em;
}

/* The SVG mountain shape drawn over the bottom of the banner */
.image-banner__mountains {
  position: absolute; /* positioned inside .image-banner (which has position: relative) */
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  opacity: 0.25;  /* very subtle — just a hint of the mountain shape */
}


/* ════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
════════════════════════════════════════════════════════════ */
.site-main {
  max-width: 960px;     /* readable content width — prevents lines from being too long */
  margin: 0 auto;       /* centers the content area horizontally on wide screens */
  padding: 3rem 1.5rem 4rem; /* top | left+right | bottom */
}


/* ════════════════════════════════════════════════════════════
   SECTION TITLE AND SUBTITLE
════════════════════════════════════════════════════════════ */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 700;
  color: var(--charcoal);
  text-align: center;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

/* Bold text inside the subtitle gets the sky blue color */
.section-subtitle strong {
  color: var(--sky);
}


/* ════════════════════════════════════════════════════════════
   PASSWORD NOTICE BOX
   ──────────────────────────────────────────────────────────
   The blue banner informing visitors that a password is needed.
════════════════════════════════════════════════════════════ */
.password-notice {
  display: flex;            /* flex layout puts children side by side */
  align-items: center;      /* vertically aligns icon and text */
  gap: 0.75rem;             /* space between the icon and text */
  background: linear-gradient(135deg, var(--sky-deep), var(--sky));
  color: white;
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  box-shadow: 0 2px 12px rgba(14,107,168,0.2);
}

.password-notice__icon {
  font-size: 1.4rem;
  flex-shrink: 0; /* prevents the icon from shrinking when space is tight */
}

/* Links inside the notice are gold colored */
.password-notice a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px; /* moves the underline slightly away from the text */
}


/* ════════════════════════════════════════════════════════════
   PROJECT CARDS GRID
   ──────────────────────────────────────────────────────────
   CSS Grid layout for the project cards.
   auto-fill: creates as many columns as will fit.
   minmax(280px, 1fr): each column is at least 280px wide,
   and all columns share remaining space equally (1fr = 1 fraction).
   On a wide screen: 3 columns. On mobile: 1 column.
════════════════════════════════════════════════════════════ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* always exactly 3 columns = 2 rows of 3 cards */
  gap: 1.75rem; /* space between cards */
}


/* ════════════════════════════════════════════════════════════
   PROJECT CARD
   ──────────────────────────────────────────────────────────
   Each card is a flex column — children stack vertically.
   flex: 1 on .project-card__body makes the body grow to fill
   available space, pushing the footer button to the bottom
   regardless of how long the description text is.
════════════════════════════════════════════════════════════ */
.project-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* Option A (Session 18): gold border reinforces the elevated 3D lift */
  border: 3px solid var(--gold);
  overflow: hidden;       /* clips the stripe's color to the card's rounded corners */
  display: flex;
  flex-direction: column; /* stacks children vertically: stripe → image → body → footer */
  transition: transform var(--transition), box-shadow var(--transition);
  /* transition: smooth animation when transform or box-shadow values change (on hover) */
  opacity: 0;             /* starts invisible — JS sets animationDelay, CSS animates it in */
  animation: fadeSlideUp 0.6s ease forwards;
  position: relative;
}

/* Card lifts up when hovered — the transition on .project-card makes it smooth */
.project-card:hover {
  transform: translateY(-5px); /* move 5px upward */
  /* Option A (Session 18): deeper shadow on hover amplifies the lift effect */
  box-shadow: 4px 8px 16px rgba(0,0,0,0.36), 10px 20px 48px rgba(0,0,0,0.20);
}

/* Active card: blue stripe at top */
.project-card--active .project-card__stripe {
  background: linear-gradient(90deg, var(--sky), var(--sky-light));
}

/* Coming soon cards: reduced opacity so they look "inactive" */
.project-card--coming-soon {
  opacity: 0.75 !important;
  /* !important overrides the animation that would restore opacity to 1.
     Without !important, the animation would override this rule. */
}

/* Coming soon cards do NOT lift on hover */
.project-card--coming-soon:hover {
  transform: none;
  cursor: default; /* shows the normal arrow cursor instead of the pointer hand */
}

/* Coming soon card: gray stripe at top */
.project-card--coming-soon .project-card__stripe {
  background: linear-gradient(90deg, var(--charcoal-soft), var(--charcoal-mid));
}

/* The thin colored stripe at the very top of each card */
.project-card__stripe {
  height: 6px;
  width: 100%;
  flex-shrink: 0; /* prevents the stripe from shrinking in flex layout */
}

/* The image / emoji placeholder area */
.project-card__image-area {
  height: 140px;
  background: linear-gradient(135deg, #e8f0f8 0%, #d6e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* so the lock badge (position: absolute) can anchor inside it */
  overflow: hidden;
}

/* Gray background for coming-soon image areas */
.project-card--coming-soon .project-card__image-area {
  background: linear-gradient(135deg, #ebebeb 0%, #e0e0e0 100%);
}

/* The large emoji shown when no thumbnail photo exists */
.project-card__thumb-placeholder {
  font-size: 3.5rem;
  opacity: 0.35;
}

/* Real thumbnail photo — fills the image area and crops to fit */
.project-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* scales and crops the image to fill the box without stretching */
  display: block;
}

/* The "🔒 Password Protected" or "⏳ Coming Soon" pill badge */
.project-card__lock-badge {
  position: absolute; /* positions relative to .project-card__image-area */
  top: 10px;
  right: 10px;
  background: rgba(14,107,168,0.85); /* semi-transparent blue */
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;  /* pill shape */
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Gray badge for coming-soon cards */
.project-card--coming-soon .project-card__lock-badge {
  background: rgba(46,46,56,0.75);
}

/* The body section: tag, title, description */
.project-card__body {
  padding: 1.25rem 1.5rem 1rem;
  flex: 1; /* grows to fill remaining space in the flex column, pushing footer down */
  display: flex;
  flex-direction: column;
}

/* Small uppercase category label above the title */
.project-card__tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.4rem;
}

/* Muted color for coming-soon tags */
.project-card--coming-soon .project-card__tag {
  color: var(--text-muted);
}

/* Card title */
.project-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

/* Card description text */
.project-card__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1; /* fills remaining body space so the button always aligns to the bottom */
}

/* Footer section — holds the button */
.project-card__footer {
  padding: 0 1.5rem 1.25rem;
}


/* ════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════ */

/* "Visit Site" button — active project cards */
.btn-visit {
  display: inline-flex;       /* allows gap and alignment inside the button */
  align-items: center;
  gap: 0.5rem;
  width: 100%;                /* full width of the card footer */
  justify-content: center;
  padding: 0.65rem 1.5rem;
  background: linear-gradient(135deg, var(--sky), var(--sky-light));
  color: white;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;      /* removes the underline from the <a> link */
  cursor: pointer;            /* shows the hand cursor on hover */
  transition: filter var(--transition), transform 0.15s ease;
  box-shadow: 0 2px 10px rgba(14,107,168,0.25);
}

/* Brighten the button on hover */
.btn-visit:hover {
  filter: brightness(1.1); /* brightens the element by 10% — works on gradients */
  transform: translateY(-1px);
}

/* Reset transform when actively clicking */
.btn-visit:active {
  transform: translateY(0);
}

/* "Coming Soon" disabled button — inactive project cards */
.btn-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  background: #e8e8ee;        /* gray — visually signals "unavailable" */
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: not-allowed;        /* shows the ⊘ cursor — signals cannot click */
}


/* ════════════════════════════════════════════════════════════
   DECORATIVE DIVIDER
   ──────────────────────────────────────────────────────────
   The gold fading line with a wheat emoji in the center.
   The lines are created with ::before and ::after pseudo-elements.
   flex: 1 makes each line grow to fill equal space on each side.
════════════════════════════════════════════════════════════ */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
  opacity: 0.4; /* subtle — 40% opaque */
}

/* The lines on each side of the emoji */
.divider::before,
.divider::after {
  content: '';  /* required — without this, pseudo-elements don't appear */
  flex: 1;      /* each line grows equally, pushing the emoji to the center */
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  /* fades in from the left, peaks at gold, fades out to the right */
}

.divider__icon {
  font-size: 1.1rem;
}


/* ════════════════════════════════════════════════════════════
   IMAGE PLACEHOLDER SPOTS (three small dashed boxes)
════════════════════════════════════════════════════════════ */
.image-spots {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* always 3 equal columns */
  gap: 1rem;
  margin-bottom: 3rem;
}

.image-spot {
  border: 2px dashed var(--gold-light); /* dashed border signals "placeholder" visually */
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  background: rgba(201,146,42,0.04); /* very faint gold tint */
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.image-spot__icon {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.4rem;
  opacity: 0.5;
}

/* Monospace code-style label showing the suggested filename */
.image-spot code {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  background: var(--gold-pale);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  color: var(--gold);
  font-family: monospace; /* monospace = all characters the same width, like a typewriter */
  word-break: break-all;  /* allows long filenames to wrap inside the box */
}


/* ════════════════════════════════════════════════════════════
   ACCENT IMAGE ROW — hover / touch pop effect
   ──────────────────────────────────────────────────────────
   Each image in .image-spots gets:
     - smooth scale-up to 125% on hover/focus/touch
     - a thick vivid border unique to each image
     - a deep colored drop-shadow matching the border
     - z-index: 10 so it floats above its siblings
     - overflow: visible on .image-spots so nothing is clipped

   HOW THE TOUCH TRIGGER WORKS:
     The .is-active class is toggled by a touchstart listener
     in js/main.js, mirroring the :hover state on mobile.
════════════════════════════════════════════════════════════ */

/* Allow the grid to overflow so inflated images aren't clipped */
.image-spots {
  overflow: visible;
}

/* ── Base state for all three accent images ── */
.accent-img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 0;                    /* sharp corners — border lands clean */
  border: 4px solid transparent;      /* invisible border holds layout space */
  cursor: pointer;
  position: relative;
  z-index: 1;
  /* Animate transform, border, box-shadow, and z-index together.
     0.38s = dramatic but not sluggish */
  transition:
    transform    0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    box-shadow   0.38s cubic-bezier(0.22, 1, 0.36, 1);
  /* cubic-bezier(0.22,1,0.36,1) = fast-out, slow-finish —
     the image launches outward then settles, like a spring */
}

/* ── Shared hover/active state (triggered by CSS :hover or JS .is-active) ── */
.accent-img:hover,
.accent-img.is-active {
  transform: scale(1.25);
  z-index: 10;         /* float above sibling images */
}

/* ── Runner — electric blue ── */
.accent-img--runner {
  /* border starts transparent (above), changes on hover */
}
.accent-img--runner:hover,
.accent-img--runner.is-active {
  border-color: #00BFFF;
  box-shadow:
    0  0  0  4px #00BFFF,               /* tight glow ring */
    0 18px 48px 4px rgba(0,191,255,0.65), /* wide colored bloom */
    0  8px 20px 2px rgba(0,0,0,0.45);    /* grounding dark shadow */
}

/* ── Four runners — hot magenta ── */
.accent-img--runners-four {
}
.accent-img--runners-four:hover,
.accent-img--runners-four.is-active {
  border-color: #FF1493;
  box-shadow:
    0  0  0  4px #FF1493,
    0 18px 48px 4px rgba(255,20,147,0.65),
    0  8px 20px 2px rgba(0,0,0,0.45);
}

/* ── Donkey — blazing orange-gold ── */
.accent-img--donkey {
}
.accent-img--donkey:hover,
.accent-img--donkey.is-active {
  border-color: #FF8C00;
  box-shadow:
    0  0  0  4px #FF8C00,
    0 18px 48px 4px rgba(255,140,0,0.65),
    0  8px 20px 2px rgba(0,0,0,0.45);
}


/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(14,107,168,0.1); /* very faint blue dividing line */
}

.site-footer a {
  color: var(--sky);
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ──────────────────────────────────────────────────────────
   @keyframes defines the steps of an animation.
   'from' = starting state, 'to' = ending state.
   Elements reference this by name in their 'animation:' property.

   fadeSlideUp:
   Starts invisible (opacity: 0) and 20px below its final position.
   Ends fully visible (opacity: 1) at its normal position.
   Creates the gentle "fade in while sliding up" entrance effect.
════════════════════════════════════════════════════════════ */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* 20px below final position */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* final resting position */
  }
}
/* Note: animation stagger delays for each card are set by JavaScript
   in main.js using  card.style.animationDelay  */


/* ════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN  (Media Queries)
   ──────────────────────────────────────────────────────────
   @media rules apply their styles ONLY when the screen matches
   the condition — in this case, when the screen is below a
   certain width (a phone or small tablet).

   max-width: 640px = applies on screens 640px wide or narrower
   This is a "mobile-first override" — the rules above define
   the desktop layout, and these rules adjust it for small screens.
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .site-header     { padding: 2.5rem 1.25rem 1.5rem; } /* less padding on small screens */
  .image-banner    { height: 160px; margin-top: 1.5rem; } /* shorter banner on mobile */
  .site-main       { padding: 2rem 1rem 3rem; }
  .image-spots     { grid-template-columns: 1fr; } /* single column on mobile */
  .projects-grid   { grid-template-columns: 1fr; } /* single column on mobile */
  .password-notice { flex-direction: column; text-align: center; }
  /* stack the icon above the text on very narrow screens */
}

/* Medium screens: tablets roughly 641–900px wide */
@media (min-width: 641px) and (max-width: 900px) {
  .image-spots    { grid-template-columns: repeat(2, 1fr); } /* 2 columns instead of 3 */
  .projects-grid  { grid-template-columns: repeat(2, 1fr); } /* 2 columns on tablet */
}


/* ── Learning Docs info box (Session 18) ─────────────────────
   Sits below the project card grid. Styled to feel like an
   academic "resource section" — gold accent, library aesthetic.
──────────────────────────────────────────────────────────── */
.docs-info-box {
  max-width: 640px;
  margin: 2.5rem auto 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  /* Option A (Session 18): matches elevated card treatment */
  border: 3px solid var(--gold, #c9922a);
  box-shadow: 2px 4px 8px rgba(0,0,0,0.32), 6px 12px 32px rgba(0,0,0,0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.docs-info-box:hover {
  transform: translateY(-3px);
  box-shadow: 4px 8px 16px rgba(0,0,0,0.36), 10px 20px 48px rgba(0,0,0,0.20);
}

.docs-info-box__stripe {
  height: 6px;
  background: linear-gradient(90deg, var(--gold, #c9922a) 0%, var(--gold-light, #e8b84b) 50%, var(--gold, #c9922a) 100%);
}

.docs-info-box__body {
  padding: 1.6rem 1.8rem 1.5rem;
}

.docs-info-box__icon-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.docs-info-box__emoji {
  font-size: 2rem;
  line-height: 1;
}

.docs-info-box__lock-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(200,168,75,0.15);
  color: #8a6900;
  border: 1px solid rgba(200,168,75,0.4);
  padding: 0.2rem 0.65rem;
  border-radius: 2rem;
}

.docs-info-box__title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-primary, #1a2a5e);
  margin: 0 0 0.5rem;
}

.docs-info-box__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 1.1rem;
}

.docs-info-box__pw-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.docs-info-box__pw-input {
  flex: 1;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid #d0d0d0;
  border-radius: 2rem;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.docs-info-box__pw-input:focus {
  border-color: var(--gold, #c9922a);
}

.docs-info-box__pw-btn {
  background: linear-gradient(135deg, var(--gold, #c9922a), var(--gold-light, #e8b84b));
  color: #1a2a5e;
  border: none;
  padding: 0.55rem 1.3rem;
  border-radius: 2rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s;
}

.docs-info-box__pw-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.docs-info-box__pw-btn:focus-visible { outline: 2px solid var(--gold, #c9922a); outline-offset: 2px; }

.docs-info-box__pw-error {
  font-size: 0.82rem;
  color: #e74c3c;
  margin: 0.4rem 0 0;
  min-height: 1.1em;
  font-weight: 600;
}