/* WORK section — equal tiles, responsive grid.
   Selectors are tolerant of both compact ("repeat(3") and
   spaced ("repeat(3" with a space after the colon) inline styles,
   since different bundle exports emit either form. */
#work div[style*="grid-template-columns:repeat(3"],
#work div[style*="grid-template-columns: repeat(3"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1vw, 8px) !important;
  width: 100%;
}

@media (max-width: 960px) {
  #work div[style*="grid-template-columns:repeat(3"],
  #work div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 540px) {
  #work div[style*="grid-template-columns:repeat(3"],
  #work div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

#work a[data-tile] {
  display: block;
  width: 100%;
  min-width: 0;
}

#work a[data-tile] > div:first-child {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  min-height: 0;
}

#work a[data-tile] > div:first-child.l5-has-video {
  background: #000 !important;
}

#work a[data-tile] > div:first-child > .l5-yt-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #000;
}

#work a[data-tile] > div:first-child > .l5-yt-bg .l5-yt-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

#work a[data-tile] > div:first-child > .l5-yt-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

#contact {
  position: relative;
  z-index: 2;
}

/* --- Accessibility: visible keyboard focus (bundle ships none) --- */
a:focus-visible,
[onclick]:focus-visible,
[data-tile]:focus-visible,
button:focus-visible {
  outline: 2px solid #6a92d6 !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Icon-only social links get a clearer focus ring on the light contact card */
#contact a[aria-label]:focus-visible {
  outline-color: #002a6f !important;
}

/* The bundle's inline hover sets a near-black glyph color on a navy fill
   (fails contrast). Force a light glyph on hover/focus for the SVG icons. */
a[data-l5-social]:hover,
a[data-l5-social]:focus-visible {
  color: #F1EADD !important;
}
a[data-l5-social] svg {
  display: block;
}

/* --- Respect reduced-motion for the scroll-reveal + hover transforms --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rev] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===================================================================
   Nav logo (injected by slot-videos.js) — 2x size, responsive
   =================================================================== */
.l5-logo-img {
  height: 60px;
  width: auto;
}
@media (max-width: 480px) {
  .l5-logo-img {
    height: 46px;
  }
}

/* ===================================================================
   Nav: active-state underline + hover/focus affordance (injected)
   The nav bar uses mix-blend-mode, so an underline via text-decoration
   (which inherits the blended text color) stays readable on any hero.
   =================================================================== */
#nav-work[data-l5-scroll],
#nav-about[data-l5-scroll],
#nav-news[data-l5-scroll],
#nav-contact[data-l5-scroll] {
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.2s ease;
}
#nav-work.l5-nav-active,
#nav-about.l5-nav-active,
#nav-news.l5-nav-active,
#nav-contact.l5-nav-active,
#nav-work[data-l5-scroll]:hover,
#nav-about[data-l5-scroll]:hover,
#nav-news[data-l5-scroll]:hover,
#nav-contact[data-l5-scroll]:hover {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 6px !important;
}
/* Keyboard focus ring, distinct from the active underline. */
[data-l5-scroll]:focus-visible,
.l5-chevron:focus-visible {
  outline: 2px solid #6a92d6 !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}
/* Mobile menu active item indicator. */
#l5-menu button.l5-nav-active {
  color: #002a6f !important;
  font-weight: 800 !important;
  box-shadow: inset 3px 0 0 0 #002a6f;
}

/* ===================================================================
   Home hero: studio showreel as a full-bleed background banner
   =================================================================== */
.l5-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #15110d;
}
.l5-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Cover the hero with a 16:9 iframe (no letterboxing) via the vh/vw trick. */
.l5-hero-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 177.78vh);
  height: max(56.25vw, 100vh);
  min-width: 100%;
  min-height: 100%;
  border: 0;
  pointer-events: none;
}
/* Keep the video fully visible: only a light darkening at the very top (nav /
   logo legibility) and bottom (play button), with a clear window in between.
   The headline stays readable via text-shadow on .l5-hero-content instead of a
   full-surface dark overlay. */
.l5-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(21, 17, 13, 0.4) 0%,
    rgba(21, 17, 13, 0) 16%,
    rgba(21, 17, 13, 0) 74%,
    rgba(21, 17, 13, 0.45) 100%
  );
}
/* Text/drop shadow so headline, eyebrow and scroll cue read over the video
   without a heavy overlay dimming the footage. */
.l5-hero-content,
.l5-hero-content * {
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.6);
}
.l5-hero-play {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(241, 234, 221, 0.5);
  background: rgba(21, 17, 13, 0.35);
  color: #f1eadd;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.l5-hero-play:hover {
  background: rgba(0, 42, 111, 0.65);
  border-color: #6a92d6;
}
.l5-hero-play-ico {
  font-size: 11px;
}
@media (max-width: 600px) {
  .l5-hero-play {
    bottom: 92px;
    font-size: 11px;
    padding: 11px 18px;
    min-height: 44px;
  }
}

/* ===================================================================
   Mobile / responsive optimization
   =================================================================== */

/* Belt-and-suspenders against any element pushing the page wider than
   the viewport (e.g. absolutely-positioned hero art). */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* --- Mobile nav (hamburger) — elements injected by slot-videos.js --- */
.l5-burger {
  display: none;
}
#l5-menu {
  display: none;
}

.l5-burger {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
}
.l5-burger .l5-burger-box {
  position: relative;
  width: 24px;
  height: 16px;
}
.l5-burger .l5-burger-box span,
.l5-burger .l5-burger-box::before,
.l5-burger .l5-burger-box::after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.l5-burger .l5-burger-box::before {
  top: 0;
}
.l5-burger .l5-burger-box span {
  top: 7px;
}
.l5-burger .l5-burger-box::after {
  bottom: 0;
}
.l5-burger[aria-expanded="true"] .l5-burger-box::before {
  transform: translateY(7px) rotate(45deg);
}
.l5-burger[aria-expanded="true"] .l5-burger-box span {
  opacity: 0;
}
.l5-burger[aria-expanded="true"] .l5-burger-box::after {
  transform: translateY(-7px) rotate(-45deg);
}

#l5-menu {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 79;
  flex-direction: column;
  background: #15110d;
  border-top: 1px solid rgba(241, 234, 221, 0.12);
  padding: 8px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
#l5-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(241, 234, 221, 0.08);
  cursor: pointer;
  color: #f1eadd;
  font-family: "Space Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 4px;
}
#l5-menu button:last-child {
  border-bottom: 0;
}
#l5-menu button:active {
  color: #6a92d6;
}

@media (max-width: 600px) {
  /* Swap the cramped inline links for the hamburger. */
  .l5-navlinks {
    display: none !important;
  }
  .l5-burger {
    display: inline-flex !important;
  }
  #l5-menu.l5-open {
    display: flex !important;
  }

  /* Readable body text (>=16px also stops iOS focus-zoom on inputs). */
  #view-home p,
  #view-about p,
  #view-news p,
  #view-contact p,
  #about p,
  #news p,
  #contact p,
  #contact label,
  #contact input,
  #contact textarea {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Filter chips: >=44px tap targets, keep the row wrapping cleanly. */
  #work [data-l5-chip] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  #work [data-l5-chiprow] {
    gap: 10px !important;
    row-gap: 10px !important;
  }

  /* Social icon links: 44x44 tap area. */
  #contact a[data-l5-social] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Contact layout: the form + info-card grid ships fixed 2-column widths
     that clip the longer email/address on phones. Stack to one column and
     let long values wrap so nothing is cut off (marked by the enhancer). */
  .l5-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .l5-contact-card {
    padding: 22px !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .l5-contact-card * {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
}

/* Home contact strip: the details ship in a left-packed grid, leaving the
   "CONTACT / Giáp Võ" box hugging the left (and wrapping left on narrow
   widths). Center the whole column group so it reads as balanced, and keep
   it centered as items wrap down on smaller screens. */
.l5-contact-cols {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px 44px;
}
.l5-contact-cols > * {
  flex: 0 1 300px;
  max-width: 100%;
}
/* The CONTACT / person box gets its own row and is centered in the section
   (flex-basis:100% reliably breaks it onto its own line; content centered). */
.l5-contact-person {
  flex: 0 0 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-top: 4px;
}

/* ===================================================================
   Work tiles: show the VIDEO at rest, reveal the title on hover/focus
   =================================================================== */
/* The tile's title/category caption (marked .l5-tile-cap by the enhancer,
   since the bundle's data-dc-tpl indices shift when copy changes) sits over
   the video. Keep it hidden at rest so the footage is what's visible, and
   reveal it on hover OR keyboard focus (the bundle only did mouse hover). */
#work a[data-tile] .l5-tile-cap {
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity 0.28s ease, transform 0.28s ease !important;
}
#work a[data-tile]:hover .l5-tile-cap,
#work a[data-tile]:focus .l5-tile-cap,
#work a[data-tile]:focus-within .l5-tile-cap {
  opacity: 1 !important;
  transform: none !important;
}
/* Cursor cue that tiles are clickable (they open the lightbox). */
#work a[data-tile] {
  cursor: pointer;
}

/* ===================================================================
   Video lightbox (injected by slot-videos.js)
   =================================================================== */
body.l5-noscroll {
  overflow: hidden !important;
}

#l5-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 8, 6, 0.9);
  backdrop-filter: blur(4px);
}
#l5-lightbox.l5-open {
  display: flex;
}
#l5-lightbox .l5-lb-inner {
  position: relative;
  width: min(90vw, 1100px);
  max-height: 90vh;
}
#l5-lightbox .l5-lb-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
#l5-lightbox .l5-lb-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
#l5-lightbox .l5-lb-cap {
  margin-top: 14px;
  display: flex;
  gap: 10px 14px;
  align-items: baseline;
  flex-wrap: wrap;
  color: rgba(241, 234, 221, 0.72);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#l5-lightbox .l5-lb-cap strong {
  color: #f1eadd;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
}
#l5-lightbox .l5-lb-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
#l5-lightbox .l5-lb-close:hover,
#l5-lightbox .l5-lb-close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 600px) {
  #l5-lightbox {
    padding: 14px;
  }
  #l5-lightbox .l5-lb-inner {
    width: 96vw;
  }
  #l5-lightbox .l5-lb-close {
    top: -50px;
    right: 0;
  }
}

/* ===================================================================
   Contact view (#view-contact) — phone layout
   The form + navy info card ship as a fixed two-column grid
   (grid-template-columns:1.25fr .95fr) with no responsive fallback, so on
   narrow phones the navy card is squeezed and the longer email/address text
   clips / forces horizontal scroll. Stack to a single column <=640px and let
   long email/URL/address strings wrap. Desktop stays two-column.
   =================================================================== */
@media (max-width: 640px) {
  /* Form | info-card grid -> single column. */
  #view-contact div[style*="grid-template-columns:1.25fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Name | Email fields inside the form -> single column. */
  #view-contact div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Wrap long, unbreakable strings (email / URL / address) so nothing
   overflows the navy card or the home-view contact block. Applies at all
   widths (harmless on desktop; the strings simply wrap if ever too long). */
#view-contact div[style*="background:#002a6f"] a,
#view-contact div[style*="background:#002a6f"] div,
#contact a[href^="mailto:"],
#contact a[href^="http"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}