/*
 * CUSTOM.CSS — Elkland site overrides
 * Location: static/css/custom.css
 * Loaded after theme styles via layouts/_partials/head.html
 *
 * Theme base: 14px Fira Code monospace, #111 bg, #fff text
 * Theme CSS:  themes/digio-theme/static/css/styles.css (DO NOT EDIT)
 *
 * !important is used where Tailwind resets override our styles.
 * Colors: #fff = white, #e0e0e0 = light gray, #aaa = mid gray,
 *         #888 = dim, #666 = muted, #333 = subtle border
 */


/* ============================================================
   PROJECT INFO BLOCK (portfolio description + metadata)
   Used in: content/portfolio/{project}/index.md
   HTML:    <div class="project-info"> ... </div>
   ============================================================ */

/* Wrapper — card with subtle background to make metadata pop */
.project-info {
  margin: 0.5rem 0 2.5rem;       /* top | sides | bottom */
  background: #1a1a1a !important;  /* lifted off #111 page bg */
  border: 1px solid #333 !important; /* subtle visible border */
  border-radius: 0.5rem !important;  /* rounded corners */
  padding: 1.25rem 1.5rem !important; /* inner spacing */
}

/* Blurb — the one-line project description, largest text in the block */
p.project-blurb {
  font-size: 16px !important;    /* bump up from body 14px */
  font-weight: 500 !important;   /* medium weight (400=normal, 700=bold) */
  color: #fff !important;        /* full white for emphasis */
  margin-bottom: 0.75rem;        /* space before the divider */
  line-height: 1.6;              /* breathing room between wrapped lines */
}

/* Thin line between blurb and metadata */
hr.project-divider {
  border-top: 1px solid #333;    /* color of the line */
  margin: 0.75rem 0 !important;  /* keeps tight spacing inside info block */
}

/* Metadata lines (Role //, Tools //, Year //) */
div.project-meta {
  font-size: 15px !important;    /* slightly larger than body */
  color: #999 !important;        /* brighter than before (#666) for readability */
  margin-bottom: 0.35rem;        /* gap between each meta line */
}


/* ============================================================
   SECTION DIVIDERS (--- in markdown)
   The horizontal rules that separate media from text sections
   ============================================================ */

hr {
  margin-top: 3rem !important;   /* space above the line */
  margin-bottom: 3rem !important;/* space below the line */
  /* line color/style inherited from theme: 1px solid #333 */
}


/* ============================================================
   IMAGE SHORTCODE — {{< img src="file.png" size="large" >}}
   Shortcode: layouts/shortcodes/img.html
   Sizes: small (40%), medium (60%), large (80%), full (100%)
   ============================================================ */

/* Wrapper — centers the image and adds vertical spacing */
.img-container {
  margin: 1.5rem auto;           /* vertical gap + auto-center */
  text-align: center;            /* centers the img inside */
}

/* The image itself */
.img-container img {
  display: inline-block;
  border-radius: 4px;            /* slightly rounded corners */
}

/* Optional caption — {{< img src="..." caption="text" >}} */
.img-container figcaption {
  margin-top: 0.5rem;
  font-size: 12px;
  color: #888;
}

/* Size variants — max-width as % of the content column (896px) */
.img-small img  { max-width: 40%; }  /* ~358px */
.img-medium img { max-width: 60%; }  /* ~538px */
.img-large img  { max-width: 80%; }  /* ~717px */
.img-full img   { max-width: 100%; } /* full column width */


/* ============================================================
   YOUTUBE EMBEDS — {{< youtube "VIDEO_ID" >}}
   Hugo's built-in shortcode wraps in a responsive padding div
   ============================================================ */

/* Centers and constrains Hugo's built-in {{< youtube >}} shortcode */
/* Scoped to avoid hitting gallery media items */
:not(.media-item) > div[style*="padding-bottom"] {
  margin: 1.5rem auto;           /* vertical gap + auto-center */
  max-width: 80%;                /* don't stretch full width */
}


/* ============================================================
   GALLERY — {{< gallery cols="3" >}} ... {{< /gallery >}}
   Shortcode: layouts/shortcodes/gallery.html
   Wraps media items in a responsive CSS grid.
   Columns: 1–6 via .gallery-cols-N classes.
   ============================================================ */

.gallery {
  display: grid;
  margin: 2rem 0;
}

/* Column variants */
.gallery-cols-1 { grid-template-columns: 1fr; }
.gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Span variants — media item stretches across N columns */
.media-span-2 { grid-column: span 2; }
.media-span-3 { grid-column: span 3; }

/* Responsive: collapse to fewer columns on smaller screens */
@media (max-width: 768px) {
  .gallery-cols-3,
  .gallery-cols-4,
  .gallery-cols-5,
  .gallery-cols-6 { grid-template-columns: repeat(2, 1fr); }
  .media-span-2,
  .media-span-3 { grid-column: span 1; }
}
@media (max-width: 480px) {
  .gallery[class*="gallery-cols-"] { grid-template-columns: 1fr; }
  .media-span-2,
  .media-span-3 { grid-column: span 1; }
}


/* ============================================================
   MEDIA ITEM — {{< media type="image" src="..." >}}
   Shortcode: layouts/shortcodes/media.html
   Types: image, video, youtube
   Aspects: landscape (16:9), portrait (9:16)
   ============================================================ */

.media-item {
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

/* Images and videos fill their grid cell */
.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Caption */
.media-item figcaption {
  margin-top: 0.4rem;
  font-size: 12px;
  color: #888;
  text-align: center;
}

/* --- YouTube responsive wrappers --- */
.media-yt-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}
.media-yt-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Landscape YouTube (16:9) */
.media-yt-landscape {
  padding-bottom: 56.25%;         /* 9/16 = 56.25% */
}

/* Portrait YouTube (9:16) — for Shorts / TikTok-style */
.media-yt-portrait {
  padding-bottom: 177.78%;        /* 16/9 = 177.78% */
}

/* --- TikTok embed wrapper --- */
/* TikTok embeds need fixed height — they don't scale like YouTube/Vimeo */
.media-tiktok-wrap {
  width: 100%;
  height: 740px;
  overflow: hidden;
  border-radius: 4px;
}
.media-tiktok-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


/* ============================================================
   BREAKDOWN LINK — optional link to Elk-o-rithms deep dive
   Added by single.html when frontmatter has `breakdown: "/path"`
   ============================================================ */

.breakdown-link {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #333;
}
.breakdown-link a {
  color: #aaa;
  font-size: 14px;
  transition: color 0.15s;
}
.breakdown-link a:hover {
  color: #fff;
}