/* ==========================================================================
   01-layout.css — spacing, sizing & positioning only
   No color, no transparency, no blur — those live in 02-design.css.
   Load this AFTER 00-base-theme.css. Loading this file alone should
   move/resize things correctly, but they'll look visually "undressed"
   (e.g. the navbar solid instead of translucent) until 02-design.css
   is added too — that's expected, and useful for testing: if something
   is in the wrong PLACE or wrong SIZE, the bug is in this file: if
   something is in the right place but looks visually wrong (color,
   transparency), the bug is in 02-design.css instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared token: navbar height
   Reads Super › Navigation › Navbar Height (--navbar-height), so the
   slider in Super now drives both the navbar itself and how far the
   hero cover reaches up behind it. Change it in Super, not here.
   -------------------------------------------------------------------------- */
:root {
  --dj-nav-height: var(--navbar-height);
}

/* --------------------------------------------------------------------------
   Navbar height
   -------------------------------------------------------------------------- */
.super-navbar {
  min-height: var(--dj-nav-height) !important;
}

.super-navbar__menu {
  min-height: var(--dj-nav-height) !important;
}

/* --------------------------------------------------------------------------
   Hero cover image — position & size only (not opacity/color/fade)
   -------------------------------------------------------------------------- */
.notion-header__cover.no-cover {
  display: none !important;
}

.footer-cover,
.footer-cover:before,
.notion-header__cover.has-cover,
.notion-header__cover:after {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
}

.notion-header__cover.has-cover {
  top: calc(-1 * var(--dj-nav-height)) !important;
  margin-top: 0 !important;
  /* Cover height comes from Super › Layout › Cover height
     (--header-cover-height, in vh), plus the navbar height so the
     visible portion below the navbar stays the size you set. */
  height: calc(var(--header-cover-height) + var(--dj-nav-height)) !important;
  max-height: calc(var(--header-cover-height) + var(--dj-nav-height)) !important;
  z-index: -2 !important;
}

/* Direct override for the actual <img> nested inside .notion-header__cover
   (confirmed via inspected page data — a distinct element/class from the
   outer div above). Forces it to fill its container regardless of
   whatever is happening with Next.js's own fill-mode sizing. */
.notion-header__cover-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* .notion-header likely clips anything extending above its own box by
   default (a common pattern for hero sections) — which would silently
   cut off exactly the portion of the cover pulled up above it, since
   that portion now extends past .notion-header's own top edge. */
.notion-header {
  overflow: visible !important;
}

/* Guarantee consistent top spacing on every page, regardless of
   whether a cover image is set. Without this, no-cover pages (like
   Art, Work) collapse to zero header height while has-cover pages
   (like About, Manifesto) keep the space the cover reserves —
   creating inconsistent spacing between page types.
   Fixed px, not --header-cover-height (30vh): that variable is
   designed for the hero cover image, where scaling with viewport
   makes sense. For this purpose — reserving modest, consistent
   label space — a viewport-relative unit scales unpredictably
   (confirmed: computed to 704px on a tall screen). 200px is a
   starting estimate, not a measured value — easy to adjust. */
.notion-header {
  min-height: 60px !important;
}

/* THE HERO / NAVBAR FIX. Confirmed via computed styles: Super sets
   overflow: hidden auto on main.super-content, which starts at the
   bottom of the navbar (y: 92px). Any non-visible overflow turns it
   into a clipping box, so the part of the cover pulled up behind the
   navbar was being cut off — leaving only the solid page background
   behind the navbar. That's also why the navbar looked "opaque" at
   the top of the page: it was transparent all along, just sitting
   over plain #111 with nothing to show through.
   overflow-x: clip keeps Super's protection against sideways
   scrolling (e.g. from full-width sections) but, unlike hidden,
   doesn't force the vertical direction to clip too. */
main.super-content {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Confirmed via computed styles: Super's own super.css sets overflow:
   hidden directly on .notion-header__cover itself (not just its
   parent), and it was winning. */
.notion-header__cover {
  overflow: visible !important;
}

.footer-cover:before,
.notion-header__cover:after {
  content: "" !important;
  z-index: 1 !important;
  bottom: -2px !important;
  height: 100% !important;
}

.footer-cover {
  z-index: -1 !important;
  min-width: 100% !important;
  min-height: 25% !important;
  height: auto !important;
  bottom: 0 !important;
  transform: rotate(180deg) !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   Gallery cards — shared reset
   -------------------------------------------------------------------------- */
.notion-collection-gallery .notion-collection-card {
  min-height: 60px !important;
}

/* --------------------------------------------------------------------------
   Gallery cards — cover vs. no-cover content behavior (all sizes)
   CONFIRMED from real HTML: .notion-collection-card__cover is the class
   on the <img> itself, not a wrapper div containing one — so this
   checks for that class directly, not a descendant of it.
   -------------------------------------------------------------------------- */
.notion-collection-gallery .notion-collection-card:has(.notion-collection-card__cover) .notion-collection-card__content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 35% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 20px 16px 16px !important;
}

/* CONTENT IS NOTION'S CALL, NOT OURS.
   This used to force every card with a cover image to show its title
   and hide its description and tags — which silently overrode the
   per-view Properties settings in Notion and made all cover galleries
   behave identically.

   Now each gallery shows exactly what its own Notion view is set to
   show (none / title / title + tag / title + description + tag), and
   this file only handles how that content sits on the card.

   To change what a gallery displays: open that view in Notion, use
   its Properties menu, and toggle the fields on or off there.

   To suppress a property on ONE gallery only (rather than in Notion),
   scope a rule to that gallery's block ID in 04-special-features.css
   — see the testimonials fix there for the pattern. */
.notion-collection-gallery .notion-collection-card:has(.notion-collection-card__cover) .notion-property__title,
.notion-collection-gallery .notion-collection-card:has(.notion-collection-card__cover) .notion-property__text,
.notion-collection-gallery .notion-collection-card:has(.notion-collection-card__cover) .notion-pill {
  display: revert !important;
}

.notion-collection-gallery .notion-collection-card:not(:has(.notion-collection-card__cover)) {
  height: auto !important;
}

.notion-collection-gallery .notion-collection-card:not(:has(.notion-collection-card__cover)) .notion-collection-card__content {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 16px !important;
}

.notion-collection-gallery .notion-collection-card:not(:has(.notion-collection-card__cover)) .notion-collection-card__property {
  display: block !important;
}

/* --------------------------------------------------------------------------
   Large — masonry: featured cards, dense-packed
   -------------------------------------------------------------------------- */
.notion-collection-gallery.large {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-auto-flow: row dense !important;
  grid-auto-rows: auto !important;
  gap: var(--collection-card-gap) !important; /* Super › Databases › Card Gap */
}

.notion-collection-gallery.large .notion-collection-card:nth-child(26n+2):not(:last-child),
.notion-collection-gallery.large .notion-collection-card:nth-child(26n+8):not(:last-child),
.notion-collection-gallery.large .notion-collection-card:nth-child(26n+12):not(:last-child),
.notion-collection-gallery.large .notion-collection-card:nth-child(26n+20):not(:last-child) {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}

.notion-collection-gallery.large .notion-collection-card:has(.notion-collection-card__cover) .notion-collection-card__cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media all and (max-width: 900px) {
  .notion-collection-gallery.large {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media all and (max-width: 600px) {
  .notion-collection-gallery.large {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Medium & Small — simple grid: uniform cells, fixed column count
   -------------------------------------------------------------------------- */
.notion-collection-gallery.medium,
.notion-collection-gallery.small {
  display: grid !important;
  gap: var(--collection-card-gap) !important; /* Super › Databases › Card Gap */
}

.notion-collection-gallery.medium .notion-collection-card,
.notion-collection-gallery.small .notion-collection-card {
  grid-column: auto !important;
  grid-row: auto !important;
}

.notion-collection-gallery.medium {
  grid-template-columns: 1fr 1fr 1fr !important;
}

.notion-collection-gallery.medium .notion-collection-card {
  min-height: 0 !important;
}

.notion-collection-gallery.small {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
}

.notion-collection-gallery.medium .notion-collection-card:has(.notion-collection-card__cover) .notion-collection-card__cover,
.notion-collection-gallery.small .notion-collection-card:has(.notion-collection-card__cover) .notion-collection-card__cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media all and (max-width: 900px) {
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media all and (max-width: 600px) {
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr !important;
  }
}

@media all and (max-width: 1100px) {
  .notion-collection-gallery.small {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

@media all and (max-width: 800px) {
  .notion-collection-gallery.small {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media all and (max-width: 500px) {
  .notion-collection-gallery.small {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Notion button blocks (e.g. "Learn more") — size & shape
   Confirmed via real HTML: <a class="notion-link notion-button__content
   color-default">. This is a native Notion button, distinct from the
   text-link-styled-as-pill-button system elsewhere in this file.
   border-radius matches --cta-border-radii for consistency with the
   site's other buttons, since Super's own default here isn't visible
   to check against.
   -------------------------------------------------------------------------- */
.notion-button__content {
  /* Midpoint between the native button's original 14px 28px and the
     text-link pill's 8px 12px, to bring their proportions closer
     together. */
  padding: 11px 20px !important;
  border-radius: var(--cta-border-radii) !important;
}

/* --------------------------------------------------------------------------
   Paragraph spacing — MOVED
   Body and heading spacing now lives in the typography control panel
   at the top of 03-text-treatment.css, alongside their line-heights,
   so all vertical rhythm is tuned in one place.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Stacked columns (mobile) — vertical gap between them
   Super's Layout › Column gap (46px) is the HORIZONTAL space between
   side-by-side columns, which is right on desktop. But when columns
   stack on mobile, that same 46px becomes vertical space — and lands
   on top of the paragraph spacing already under an eyebrow label, so
   a two-column "LABEL / content" row opens a big hole on phones.

   row-gap only ever applies along the stacking direction, so setting
   it here affects the stacked (mobile) case ONLY. The desktop
   horizontal gap still comes from Super, untouched. Raise or lower
   this one number to taste.
   -------------------------------------------------------------------------- */
:root {
  --dj-stacked-row-gap: 8px;
}

.notion-row {
  row-gap: var(--dj-stacked-row-gap) !important;
}

/* --------------------------------------------------------------------------
   Collapsed toggles — contain their contents
   A closed toggle collapses to 1px tall with opacity 0, but keeps
   overflow: visible — so anything tall inside it (e.g. a long gallery)
   still spills out, invisible but still counted in the page's scroll
   height. On the About page that added ~3,900px of empty space below
   the footer.

   Super's overflow: hidden on main.super-content used to clip that
   spill. The hero fix above changed it to clip horizontally only, so
   the bottom spill is no longer contained — hence this rule, which
   fixes the cause rather than re-clipping the whole page.

   Scoped to CLOSED toggles only (:not(.open)), so open toggles expand
   and show their contents exactly as before.
   -------------------------------------------------------------------------- */
.notion-toggle:not(.open) > .notion-toggle__content {
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Page header — icon space normalization
   Super reserves vertical space for a page icon (and tags the header
   with has-icon-* classes) whether or not that icon is visible. So
   adding an icon in Notion pushed the page's content down a line or
   two, and pages with icons no longer lined up with pages without
   them — even where the icon itself was hidden.

   This zeroes that reserved space so every page starts at the same
   height, with or without an icon. Keep your icons in Notion; they
   no longer affect the layout here.

   CONFIRMED via Inspect: the space lives on
   .notion-header__title-wrapper as a 142px top margin — reserved for
   the icon, and kept even when the icon and title are both hidden.
   That element is the actual fix; the rest below is belt and braces.

   DIAL: --dj-header-space is the space above page content. Set it
   once and every page type matches. Raise it to push all pages down
   together.
   -------------------------------------------------------------------------- */
:root {
  --dj-header-space: 0;
}

.notion-header,
.notion-header[class*="has-icon"],
.notion-header.page {
  padding-top: var(--dj-header-space) !important;
  margin-top: var(--dj-header-space) !important;
}

/* THE ACTUAL CULPRIT: the title wrapper carries a large top margin
   reserved for the icon, whether or not the icon is visible. */
.notion-header__title-wrapper {
  margin-top: var(--dj-header-space) !important;
  margin-bottom: 0 !important;
}

/* The icon's own box, neutralized so it contributes no height even
   when Super or a page-level rule hides it. */
.notion-header__icon-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* When the icon is hidden on a page, its wrapper shouldn't hold a
   line of space open either. */
.notion-header__icon-wrapper:empty,
.notion-header__icon-wrapper[hidden] {
  display: none !important;
  height: 0 !important;
}

/* --------------------------------------------------------------------------
   Mobile — header space & hero cover scale
   Phones get their own values: less space above content, and a much
   taller hero cover so background images fill the screen instead of
   sitting in a band at the top.
   -------------------------------------------------------------------------- */
@media all and (max-width: 768px) {
  :root {
    --dj-mobile-header-space: 0;    /* space above page content */
    --dj-mobile-cover-height: 100vh; /* hero cover height on phones */
    --dj-mobile-cover-opacity: .75; /* 1 = full strength */
  }

  .notion-header,
  .notion-header.page,
  .notion-header[class*="has-icon"],
  .notion-header__title-wrapper {
    margin-top: var(--dj-mobile-header-space) !important;
    padding-top: var(--dj-mobile-header-space) !important;
    min-height: 0 !important;
  }

  .notion-header__cover.has-cover {
    height: calc(var(--dj-mobile-cover-height) + var(--dj-nav-height)) !important;
    max-height: calc(var(--dj-mobile-cover-height) + var(--dj-nav-height)) !important;
    opacity: var(--dj-mobile-cover-opacity) !important;
  }

  .notion-header__cover-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  /* Covers sit at the top of the page regardless of whether the page has
	an icon. Super adds its own offset on icon pages, which stacked with our
	navbar pull-up and cropped the image. */
  .notion-header__cover.has-cover,
  .notion-header__cover.has-cover.has-icon,
  .notion-header__cover.has-cover.has-icon-image {
    top: calc(-1 * var(--dj-nav-height)) !important;
  }
}