/* TechSparq DAM responsive rules. Every viewport and breakpoint behaviour
   lives here, kept apart from base.css so layout stays in one place as pages
   are added. Loaded after base.css, so these rules override the desktop
   defaults. The desktop design (1440 and 1280) is the baseline; these rules
   adapt it downward.

   Breakpoints:
     1024px and below (tablet)  the header nav collapses into a hamburger on
                                the left, gutter tightens to 32, so the bar is
                                never squished. The account menu stays put.
     560px and below (phone)    gutter tightens to 20, the wordmark is hidden. */

/* ---- Gutter steps ----------------------------------------------------- */
@media (max-width: 1024px) { :root { --margin: 32px; } }
@media (max-width: 560px)  { :root { --margin: 20px; } }

/* ---- Hamburger, tablet and below -------------------------------------- */

/* Hidden on desktop; the tablet query turns it on. */
.app-header__hamburger { display: none; }

@media (max-width: 1024px) {
  .app-header__hamburger { display: flex; }

  /* The bottom row (client picker, nav, Upload) becomes a drawer hung off the
     hamburger. It leaves normal flow, so the header is a single compact bar
     until the hamburger is opened. Same markup as desktop, re-presented, so
     there is one source of truth for these controls. */
  .app-header__row--bottom {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--margin);
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: min(320px, calc(100vw - (var(--margin) * 2)));
    padding: 8px;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), 0 14px 30px -16px rgba(26, 26, 26, .35);
  }
  .app-header[data-nav-open="true"] .app-header__row--bottom { display: flex; }

  /* Client picker as a full-width row, chevron pushed to the right. */
  .app-header__row--bottom .client-chip {
    width: 100%;
    height: 44px;
    padding: 0 12px;
  }
  .app-header__row--bottom .client-chip__name { margin-right: auto; }

  /* Nav items are plain, left-aligned links in the editorial serif, separated
     by hairlines, echoing the techsparq.com menu. No fills, no uppercase.
     Upload is one of the same links, not a button (the client chooser above is
     the only control that stays a selection box). */
  .app-header__row--bottom .app-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin: 0;
  }
  .app-header__row--bottom .navp,
  .app-header__row--bottom .btn-upload {
    width: 100%;
    height: auto;
    padding: 11px 8px;
    justify-content: flex-start;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
  }
  .app-header__row--bottom .navp:hover,
  .app-header__row--bottom .navp.on,
  .app-header__row--bottom .btn-upload:hover {
    background: transparent;
    color: var(--red-text);
  }
  /* Upload is last in the list, no trailing rule and no icon. */
  .app-header__row--bottom .btn-upload { border-bottom: 0; }
  .app-header__row--bottom .btn-upload svg { display: none; }
}

/* ---- Phone ------------------------------------------------------------ */
@media (max-width: 560px) {
  /* The wordmark is a protected brand asset; hide it rather than shrink it. */
  .app-header__product { display: none; }
  /* Selection bar tightens; drop the thumbnails to fit a phone. */
  .sel-bar { gap: 10px; padding: 0 8px 0 12px; }
  .sel-bar__thumbs { display: none; }
}

/* ---- Library grid columns --------------------------------------------- */
/* Four columns at 1440, three at 1280 (per the handoff), then down. */
@media (max-width: 1280px) {
  .grid--mosaic { --cols: 3; }
  .grid--even, .lib-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .grid--mosaic { --cols: 2; }
  .grid--even, .lib-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .grid--mosaic { --cols: 1; }
  .grid--even, .lib-skeleton { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Asset detail ----------------------------------------------------- */
@media (max-width: 1024px) {
  .simrow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  /* Notes drops below the Details/Custom pair, full width. */
  .asset__cols--notes { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  /* Details and Custom fields stack. */
  .asset__meta { grid-template-columns: 1fr; gap: 28px; }
  /* Each section carries its own header rule once stacked, so the block's top
     rule is redundant. Drop it and keep the spacing above the first section. */
  .asset__rule { display: none; }
  .asset__cols { margin-top: 24px; }
}
@media (max-width: 560px) {
  .simrow { grid-template-columns: repeat(2, 1fr); }
  .asset__title { font-size: 30px; }
}

/* ---- Brand films hero + search results -------------------------------- */
@media (max-width: 768px) {
  /* Drop the vertical short; the main film carries the section on narrow. */
  .film--side { display: none; }
  .lib-search input { font-size: 18px; }
  .lib-search__btn { padding: 0 16px; }
  .sr-title { font-size: 28px; }
  /* Collection match card stacks on narrow. */
  .coll { flex-direction: column; align-items: stretch; }
  .coll__covers { justify-content: flex-start; }
  .coll__show { width: 100%; justify-content: center; }
}