/*
Theme Name: ByJorre
Author: Jorre
Version: 1.1
*/

/* Import Ubuntu for headings/tabs. Geist is expected to be available locally
  (or provided by the user). If Geist isn't available, the browser will fall
  back to the system sans-serif stack below. */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500;700&display=swap');

/* Root styles */
:root {
  --primary-orange: #F36100;
  --active-color: #F36100;
  --text-dark: #1E1E1E;
  --text-gray: #8C8C8C;
  --bg-gray: #D9D9D9;
  --bg-white: #FFFFFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg-white);
  /* Main site text: use Geist when available, otherwise fall back */
  font-family: 'Geist', 'Google Sans Flex', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
  color: var(--text-dark);
  overflow-x: hidden;
}

/* Main container */
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  box-sizing: border-box;
}

/* Frame 44 - Main flex container */
.main-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  height: 100%;
  max-width: 1302px;
  position: relative;
}

/* Frame 45 - Left side (phone mockup) */
.image-section {
  position: relative;
  width: auto;
  /* On desktop keep the image section filling the available vertical
     space so the left image is visible. Mobile overrides will set
     `height: auto` so the square is based on width. */
  height: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  /* place image on the right by default (swap with content) */
  order: 1;
  min-height: 0; /* Prevents the image from stretching beyond its content */
}

/* Background rectangle */
.image-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--bg-gray);
  border-radius: 20px;
  transition: background 320ms ease, transform 240ms ease;
}

/* Image navigation arrows (global) -- available on desktop and mobile */
.image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.77);
  color: var(--primary-orange);
  display: none; /* shown on hover */
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  padding: 0;
  line-height: 0;
}

.image-nav svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  pointer-events: none;
  /* ensure SVG scales correctly */
  box-sizing: content-box;
  min-width: 16px !important;
  min-height: 16px !important;
  flex: 0 0 auto;
}

.image-nav-left { left: 16px; }
.image-nav-right { right: 16px; }

/* Show arrows whenever the image-section has navigation (multiple images).
  This makes arrows always visible on desktop when a project contains
  multiple images. Touch devices remain handled by the media query below. */
.image-section.has-nav .image-nav { display: flex; }

/* On touch devices always show arrows so users can tap them (only when nav exists) */
@media (hover: none) and (pointer: coarse) {
  .image-section.has-nav .image-nav { display: flex; }
}

/* Ensure SVG stroke is visible and uses the primary color variable */
.image-nav svg polyline,
.image-nav svg path {
  stroke: var(--primary-orange);
}

.image-nav:hover {
  background: rgba(0,0,0,0.95);
  transform: translateY(-50%) scale(1.04);
}

/* Modal / lightbox for clicking images */
.image-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px; /* leave a margin around the modal so image never touches viewport */
  box-sizing: border-box;
  background: rgba(0,0,0,0.75);
  z-index: 120;
}
.image-modal.open { display: flex; }
.image-modal .modal-content {
  /* modal inner wrapper: size to image with a small inner margin */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
}
.image-modal .modal-content img {
  display: block;
  width: auto;
  height: auto;
  /* enforce absolute constraints so image never exceeds viewport minus margins */
  max-width: calc(100vw - 72px);
  max-height: calc(100vh - 72px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

/* prevent body scrolling when modal is open (avoids layout jumps that can
   make the image exceed the viewport) */
body.modal-open {
  overflow: hidden !important;
}
.image-modal .modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-orange);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.image-modal .modal-nav.left { left: 24px; }
.image-modal .modal-nav.right { right: 24px; }
.image-modal .modal-nav svg { width: 22px; height: 22px; }
.image-modal .modal-nav svg polyline { stroke: currentColor; stroke-width: 2; fill: none; }
.image-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

/* Modal nav row for mobile: place the nav buttons under the image */
@media (max-width: 768px) {
  .image-modal { align-items: center; }
  .image-modal { flex-direction: column; }

  /* make modal-nav row visible and center it */
  .modal-nav-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    align-items: center;
    justify-content: center;
    z-index: 6; /* above backdrop */
  }

  /* inside the modal-nav-row the buttons should not be absolutely positioned */
  .image-modal .modal-nav {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* Phone mockup placeholder */
.phone-mockup {
  position: absolute;
  width: 50%;
  aspect-ratio: 350 / 686;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #E8E8E8;
  border-radius: 40px;
  border: 12px solid #000;
  box-shadow: 0px 6px 6.4px rgba(0, 0, 0, 0.25);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 686"><rect fill="%23f5f5f5" width="350" height="686"/><text x="50%%" y="50%%" font-size="24" fill="%23ccc" text-anchor="middle" dominant-baseline="middle" font-family="Arial">Phone Mockup</text></svg>');
  background-size: cover;
}

/* Frame 43 - Right side (content) */
.content-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  width: 34%;
  flex: 1;
  /* place content on the left by default (swapped) */
  order: 0;
}

/* allow content section to fill the available vertical space inside the
   main container so its children (heading, description, CTA) can be
   sized relative to that space */
.content-section {
  height: 100%;
  min-height: 0; /* allow children to shrink inside flexbox */
}

/* Frame 41 - Header section */
.header-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 0px;
  flex: none;
  order: 0;
}

/* Frame 46 - Tags row */
.tags-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
  flex: none;
  order: 0;
  position: relative;
  padding-top: 6px;
}

/* Frame 47 - VIBE-CODED tag */
.tag-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  gap: 8px;
  height: 32px;
  border-top: 2px solid transparent;
  flex: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.tag-item.active {
  /* active state handled by sliding indicator */
}

.tag-item:hover .tag-label {
  color: var(--text-dark);
}

/* sliding indicator that animates between tags */
.tag-indicator {
  position: absolute;
  top: 0;
  height: 2px;
  width: 0;
  left: 0;
  background: var(--active-color);
  transform: translateX(0);
  transition: transform 280ms cubic-bezier(.2,.9,.3,1), width 280ms cubic-bezier(.2,.9,.3,1), background 280ms ease;
  pointer-events: none;
  z-index: 2;
}

.tag-label {
  font-family: 'Ubuntu', sans-serif;
  font-style: normal;
  font-weight: 500; /* Ubuntu Medium for tabs */
  font-size: clamp(18px, 2vw, 24px);
  line-height: 100%;
  text-transform: uppercase;
  color: #BDBDBD;
  white-space: nowrap;
  transition: color 280ms ease;
}

.tag-item.active .tag-label {
  color: var(--text-dark);
}

/* keep DOM order; do not reorder with nth-child rules */

/* project color bar removed (data kept in projects.js) */
.byjorre-title {
  font-family: 'Ubuntu', sans-serif; /* Ubuntu Bold for BYJORRE */
  font-style: normal;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  text-transform: uppercase;
  flex: none;
  order: 1;
  align-self: stretch;
  margin: 0;
  padding: 0;
  /* Constrain the title to its parent column so it never overflows
     the left/content container. Keep it on a single line where
     possible but ensure sizing respects the parent's width. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}
.byjorre-title span {
  display: inline-block;
}
.byjorre-title .byjorre-by {
  color: var(--active-color);
  transition: color 280ms ease;
}
.byjorre-title .byjorre-jorre {
  color: var(--text-dark);
}

/* Scroll button - now serves as open/close drawer button */
.scroll-button {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  /* make this a pill so we can show the label inside while keeping rounded shape */
  min-width: 44px;
  padding: 6px 16px;
  height: auto;
  background: #1E1E1E;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10;
}

.scroll-button:hover {
  transform: translateX(-50%) translateY(-5px);
}

.arrow-icon {
  width: 24px;
  height: 24px;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.scroll-button .scroll-label {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500; /* Ubuntu Medium */
  font-size: 12px;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: inline-block;
  padding: 6px 8px;
}

.scroll-button.open .arrow-icon {
  transform: rotate(180deg);
}

/* Bottom drawer */
.bottom-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto; /* size to content up to max-height */
  max-height: 80vh; /* never exceed 80% of the viewport height */
  background: #1E1E1E;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  z-index: 20;
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
  overflow-y: auto; /* drawer scrolls only when content exceeds max-height */
}

.bottom-drawer.open {
  transform: translateY(0);
}

.drawer-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 8px;
  flex-shrink: 0;
}

.close-button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 200ms ease;
}

.close-button:hover {
  transform: scale(1.1);
}

.close-button svg {
  stroke: var(--active-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.drawer-content {
  flex: 0 0 auto; /* let the drawer size itself to content */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 93px 48px;
}

/* Make bottom drawer responsive on smaller screens */
@media (max-width: 1024px) {
  .bottom-drawer {
    height: auto; /* let content decide */
    max-height: 70vh; /* prevent it from covering entire screen */
    border-radius: 12px 12px 0 0;
  }

  .drawer-content {
    padding: 12px 28px 28px;
    align-items: flex-start;
  }

  .drawer-grid {
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .bottom-drawer {
    height: auto;
    max-height: 92vh; /* allow nearly full screen but keep some spacing */
    border-radius: 12px 12px 0 0;
    padding-bottom: 8px;
  }

  .drawer-content {
    padding: 8px 20px 20px;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .drawer-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    width: 100%;
  }

  .drawer-left,
  .drawer-right {
    width: 100%;
    gap: 12px;
  }

  .drawer-left {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* make child image stretch to full drawer height */
    gap: 22px;
    max-width: 519px;
    flex: 1 1 519px;
    flex-wrap: wrap; /* allow image and info to wrap onto multiple lines */
  }

  .drawer-image {
    /* make the image fill the left column's full height; width follows via aspect-ratio */
    aspect-ratio: 1 / 1;
    height: 100%;
    flex: 0 0 auto;
    background-color: #FFFFFF;
    background-image: url('https://byjorre.be/wp-content/uploads/2026/01/Jorre-scaled.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
  }

  .drawer-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    width: 282px;
    flex: 1 1 282px;
    min-width: 0;
  }

  .drawer-right {
    width: 100%;
    height: auto;
  }

  .drawer-logos {
    gap: 12px;
    justify-content: flex-start; /* left-align partner logos */
    flex-wrap: wrap;
  }

  .partner-logo {
    --partner-logo-height: 40px; /* slightly larger on mobile */
  }
}

.drawer-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
  width: 100%;
  max-width: 1326px;
  flex-wrap: wrap; /* allow items to wrap to the next row when they overflow */
}

.drawer-left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
  /* allow the left column to be flexible: prefer 519px but shrink when needed
     so children can wrap underneath */
  max-width: 519px;
  flex: 1 1 519px;
  flex-wrap: wrap; /* allow image and info to wrap onto multiple lines */
}

.drawer-image {
  width: 215px;
  height: 215px;
  background-color: #FFFFFF;
  /* Use `Jorre.png` in the drawer. If the file is not present, the
     background-color will be shown instead. Replace `/images/Jorre.png`
     with your asset path if needed. */
  background-image: url('https://byjorre.be/wp-content/uploads/2026/01/Jorre-scaled.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  flex-shrink: 0;
  flex: 0 0 215px; /* prefer this size but allow wrapping behavior */
}

.drawer-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  width: 282px;
  flex: 1 1 282px; /* allow this column to shrink and wrap under the image */
  min-width: 0; /* allow children to shrink inside flex */
}

.drawer-name {
  /* Keep headings visually prominent but let body font (Geist) apply
     for general text; weight kept slightly higher for name */
  font-weight: 500;
  font-size: 24px;
  line-height: 100%;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  margin-bottom: 4px; /* 4px gap between name and title */
}

.drawer-title {
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  margin-bottom: 16px; /* 16px gap between title and bio */
}

.drawer-bio {
  font-weight: 400;
  font-size: 16px;
  align-items: stretch; /* ensure left image and right content share the same height */
  color: #FFFFFF;
  margin: 0;
  padding: 0;
}

/* Light weight for institution names inside the drawer bio */
.drawer-bio .institution {
  font-weight: 100;
  font-size: 12px;

}

/* Spacer utilities used in the drawer to create consistent spacing
   without relying on element margins. These are purely presentational
   and marked aria-hidden in the HTML. */
.spacer { display: block; }
.spacer-4 { height: 4px; }
.spacer-16 { height: 16px; }
.spacer-auto { flex: 1 1 auto; min-height: 32px; }

.drawer-companies {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.drawer-label {
  font-weight: 100;
  font-size: 12px;
  line-height: 100%;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.drawer-logos {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}

.logo-placeholder {
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  border-radius: 4px;
}

/* Partner logos: use a CSS variable to control height easily while
   preserving aspect ratio (width:auto). Default matches previous
   placeholder size. Adjust `--partner-logo-height` on `.drawer-logos`
   or on individual images to change height. */
.drawer-logos {
  --partner-logo-height: 48px;
}
.partner-logo {
  height: var(--partner-logo-height);
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.drawer-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  width: 282px;
  flex: 0 0 282px; /* prefer this width but allow wrapping under .drawer-left */
  height: 215px;
}

.drawer-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-section-title {
  font-family: 'Google Sans Flex', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 100%;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
}

.contact-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #FFFFFF;
}

/* Make contact items clickable and provide space for copy icon */
.contact-item {
  position: relative;
  cursor: pointer;
  padding-right: 44px; /* room for the copy icon */
}

.contact-item .copy-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none; /* clicks handled on the parent */
}
.contact-item:hover .copy-icon,
.contact-item:focus-within .copy-icon,
.contact-item.copied .copy-icon {
  opacity: 1;
  pointer-events: auto;
}

.contact-item .copy-icon svg { width:18px; height:18px; display:block; }

/* small transient feedback that appears when text is copied */
.contact-item .copy-feedback {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--active-color);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
  z-index: 8;
}
.contact-item.copied .copy-feedback {
  opacity: 1;
  transform: translateY(-60%);
}

/* accessible visually-hidden helper for screen reader announcements */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.contact-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
  /* keep the SVG file's own stroke and fill values; prevent stroke from scaling
     when the parent is transformed (hover scale) */
  vector-effect: non-scaling-stroke;
}

.drawer-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-icons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

.social-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 200ms ease, transform 200ms ease;
  text-decoration: none;
}

.social-icon:hover {
  transform: scale(1.1);
}

.social-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  /* Do not override stroke/fill from the provided SVG files. Keep strokes
     visually consistent when the parent scales on hover. */
  vector-effect: non-scaling-stroke;
}

/* Make the product description area scroll when content overflows.
   Keeps the overall layout stable while allowing long descriptions to be readable. */
.description-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1; /* fill available vertical space inside .content-section */
  min-height: 0; /* required so children can shrink/scroll on overflow */
}
.product-description {
  margin-top: 8px;
  /* Let the description take remaining space and scroll internally
     without exceeding the parent container. Remove fixed viewport-based
     max-height in favor of flex sizing. */
  flex: 1 1 auto;
  min-height: 0; /* allow flex child to shrink properly */
  overflow: auto;
  padding-right: 8px; /* avoid text under scrollbar */
  line-height: 1.4;
  white-space: pre-wrap; /* preserve line breaks from JS/template literals */
  word-break: break-word;
}
.product-description::-webkit-scrollbar {
  width: 8px;
}
.product-description::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 4px;
}

/* Render social icons white by making them inherit the parent's color.
   Icons that are authored to use `currentColor` will follow this. */
.social-icon {
  color: #FFFFFF;
}

/* Responsive design */
@media (max-width: 1302px) {
  .container {
    padding: 48px;
  }
  
  .main-content {
    gap: 32px;
  }
  /* Make the main title scale down starting at 1302px so it doesn't
     overflow the container on medium-width viewports. This matches the
     smaller title sizing used on narrower breakpoints. */
  .byjorre-title {
    font-size: clamp(36px, 8vw, 64px);
    width: 100%;
  }
}

/* On desktop keep the button visually below the main `.container` so it
   doesn't overlap content. The button remains fixed on small screens. */
@media (min-width: 769px) {
  .container { position: relative; }
  .scroll-button {
    position: absolute !important;
    bottom: 16px; /* sit just outside the container */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
}

@media (max-width: 1024px) {
  .container {
    padding: 40px;
  }
  
  .main-content {
    gap: 24px;
  }
  
  .image-section {
    width: 66%;
  }
  
  .content-section {
    width: 34%;
  }
}

/* At intermediate widths allow the top layout to stack so the image sits on
   top and the content below (similar to the drawer behaviour). This helps
   when the viewport is narrower than a comfortable two-column layout but
   wider than our mobile breakpoint. */
/* removed: top stacking rules (drawer-only change requested by user) */
@media (max-width: 768px) {
  .container {
   padding: 32px;
   /* ensure the container can grow on mobile and allow page scrolling
     instead of being locked to a viewport height */
   min-height: 100vh;
   height: auto !important;
   padding-bottom: 48px;
   /* Align content to top on mobile so short pages don't center vertically */
   align-items: flex-start;
  }
  
  .main-content {
    /* On mobile show content first so headings (ByJorre) remain fully visible */
    flex-direction: column-reverse;
    width: 100%;
    /* Allow the main content to grow with the page on mobile so the
       overall document becomes scrollable when content exceeds the
       viewport height. Do NOT force a 100% viewport-constrained height
       here — this prevents natural page scrolling on phones. */
    height: auto;
    gap: 32px;
    min-height: 0;
    overflow: visible;
  }
  
  .image-section {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* make the image a fixed square matching the available content width
       (respects the container padding). Prevent it from flex-growing so it
       remains exactly square and doesn't consume extra vertical space. */
      flex: 0 0 auto;
     min-height: 0;
     /* Ensure on mobile the height is derived from width (true 1:1)
       and NOT inherited from the desktop `height:100%`. The `!important`
       here ensures the override in environments where cascade is tricky. */
     height: auto !important;
     /* prevent the absolutely-positioned mockup from overlapping the content
       when viewport is narrow by clipping overflow and keeping the image
       behind the content (stacking handled below) */
     overflow: hidden;
     position: relative;
     z-index: 1;
  }

  /* Ensure the phone mockup always fits inside the square image container
     on small viewports (prevents the top from being cut off). This only
     applies on mobile and preserves the desktop behavior. */
  .image-section .phone-mockup {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* allow the mockup to scale down to fit the square container */
    width: auto;
    height: 90%;
    max-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .image-placeholder {
    width: 100%;
    height: 100%;
  }

  /* On mobile ensure the project's background image fits fully inside
     the square container and is aligned to the top so the top doesn't
     get visually cropped. Use `!important` to override inline styles
     set by JavaScript (which uses `background-size: cover`). */
  #image-placeholder {
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
  }

  
  
  .content-section {
    width: 100%;
    gap: 20px;
    /* On mobile let the content flow naturally and the page scroll.
       Do not force the content column to take the remaining viewport
       height — this would limit the description and require internal
       scrolling. */
    flex: 0 0 auto;
    min-height: 0;
    /* keep content above the image on small screens so text is always visible */
    position: relative;
    z-index: 2;
  }

  /* Allow the description area to grow with the page on mobile so the
     whole document can scroll. Remove internal scrolling behaviour. */
  .description-section {
    flex: 0 0 auto;
  }

  .product-description {
    /* Let descriptions expand fully on mobile and be part of the
       normal page flow. */
    overflow: visible;
    flex: none;
  }
  
  .tags-wrapper {
    width: 100%;
  }
  
  .byjorre-title {
    width: 100%;
    font-size: clamp(36px, 8vw, 64px);
  }
  
  .product-description {
    width: 100%;
  }
  
  .scroll-button {
    bottom: 32px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 24px;
    /* let the container expand and expose bottom padding on very small screens */
    height: auto !important;
    padding-bottom: 48px;
    /* ensure top alignment on very small screens too */
    align-items: flex-start;
  }
  
  .main-content {
    gap: 20px;
  }

  /* (padding-bottom previously set above) */
  
  .image-section {
    min-height: 250px;
  }
  
  .content-section {
    gap: 16px;
  }
  
  .vibe-coded,
  .designed,
  .researched {
    font-size: clamp(14px, 2vw, 18px);
  }
  
  .byjorre-title {
    font-size: clamp(28px, 7vw, 48px);
    padding: 12px 0;
  }
  
  .product-heading {
    font-size: clamp(14px, 2vw, 18px);
  }
  
  .product-description {
    font-size: clamp(12px, 1.5vw, 14px);
  }
  
  .scroll-button {
    /* Make the scroll button a pill on small screens so the "ABOUT ME"
       label fits. Use a minimum width and padding instead of forcing a
       small square. */
    min-width: 72px;
    padding: 6px 12px;
    height: auto;
    bottom: 24px;
  }

  /* Prevent the label from wrapping on very small screens */
  .scroll-button .scroll-label {
    white-space: nowrap;
    font-size: 12px; /* keep readable size */
  }
  
  .arrow-icon {
    width: 20px;
    height: 20px;
  }
}
.logo:hover {
  filter: drop-shadow(0 0 2em #000000aa);
}
.logo.vanilla:hover {
  filter: drop-shadow(0 0 2em #f7df1eaa);
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

/* Product CTA anchor styled like a button */
.product-button {
  display: inline-block;
  margin-top: 12px;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  background-color: var(--active-color);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.product-button:hover {
  transform: translateY(-2px);
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}