/*
  Stéphane Gonzalez – Quarto site custom layout

  The site injects a portrait column on the left via assets/js/site-layout.js
  (classes: .sg-page, .sg-side, .sg-content, .sg-portrait, #portrait-rotator).

  Goal (desktop):
  - Keep the portrait column narrow and sticky.
  - Make the page feel less "zoomed-out" by slightly increasing base font size
    and widening the *outer* Quarto container (without breaking Quarto's grid).

  Important:
  - Do NOT force main.content to a fixed width.
    Quarto uses .page-columns grid for margin sidebars (e.g., listing categories).
    Forcing widths on main.content / .content can cause the sidebar to overlap the listing.

  Mobile:
  - Keep a stacked layout.
*/
:root {
  /* Page width on desktop */
  --sg-page-max: 1900px;
  --sg-page-width: min(96vw, var(--sg-page-max));

  /* Portrait column */
  --sg-side-width: 180px;
  --sg-gap: 2rem;
  --sg-sticky-top: 110px;

  /* Typography on desktop (fixes the "zoomed-out" feel) */
  --sg-desktop-font-size: clamp(18px, 0.65vw + 14px, 23px);
}

/* Wrapper injected into main.content by assets/js/site-layout.js */
.sg-page {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-gap);
}

.sg-side {
  flex: 0 0 var(--sg-side-width);
}

.sg-content {
  flex: 1 1 auto;
  min-width: 0; /* avoid overflow */
}

/* Keep portrait visible while scrolling (desktop) */
.sg-portrait {
  position: sticky;
  top: var(--sg-sticky-top);
}

#portrait-rotator {
  width: 100%;
  max-width: var(--sg-side-width);
  height: auto;
  display: block;
  border-radius: 16px;
  opacity: 1;
  transition: opacity 500ms ease;
}

/* Slightly reduce title block spacing so it doesn't feel cramped */
.quarto-title-block {
  margin-bottom: 1rem;
}

/* =========================
   Desktop / large screens
   ========================= */
@media (min-width: 992px) {
  html {
    font-size: var(--sg-desktop-font-size);
  }

  body {
    line-height: 1.55;
  }

  /*
    Keep Quarto's internal grid intact.
    main.content should remain fluid; widening is handled by the outer container below.
  */
  main.content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
    Widen the outer Quarto container instead of hacking inner wrappers.
    This preserves the margin sidebar used by listings (Categories).
  */
  .page-columns,
  .quarto-container {
    max-width: var(--sg-page-width) !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /*
    IMPORTANT:
    Do not neutralize `.content` max-width: it participates in Quarto layouts.
    Doing so can cause sidebars (listing categories) to overlap main content.
  */

  /* Optional: ensure the listing sidebar stays visually clean */
  .quarto-listing-category {
    background: white;
  }
}

/* =========================
   Mobile / narrow screens
   ========================= */
@media (max-width: 991.98px) {
  .sg-page {
    flex-direction: column;
    gap: 1.25rem;
  }

  .sg-side {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .sg-portrait {
    position: relative;
    top: auto;
  }

  #portrait-rotator {
    max-width: 320px;
    margin: 0 auto;
  }
}