/* ==========================================================================
   The Procuress — layout primitives
   Site frame, container, gutters, section rhythm, and the structural page
   shell used by the placeholder root templates.
   ========================================================================== */

@layer layout {
  .tp-site {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .tp-main {
    flex: 1 0 auto;
  }

  .tp-container {
    width: 100%;
    max-width: var(--tp-container);
    margin-inline: auto;
  }

  .tp-section {
    padding-inline: var(--tp-gutter);
  }

  /* Collection landing wrapper: view-enter animation from the export. */
  .tp-collection {
    animation: tp-view var(--tp-dur-view) var(--tp-ease) both;
  }

  /* Structural page shell (no invented layout — title, then content). */
  .tp-page {
    padding: var(--tp-space-8) var(--tp-gutter) var(--tp-space-11);
    animation: tp-view var(--tp-dur-view) var(--tp-ease) both;
  }

  .tp-page__inner {
    max-width: var(--tp-container);
    margin-inline: auto;
  }

  .tp-page__header {
    padding-bottom: var(--tp-space-5);
    margin-bottom: var(--tp-space-7);
    border-bottom: var(--tp-border);
  }

  .tp-page__header .tp-eyebrow {
    margin-bottom: var(--tp-space-3);
  }

  .tp-page__title {
    font-weight: var(--tp-weight-regular);
    font-size: var(--tp-size-h1-grid);
    letter-spacing: var(--tp-track-nav);
    text-transform: uppercase;
    line-height: var(--tp-leading-heading);
    color: var(--tp-color-ink);
  }

  .tp-page__content {
    max-width: var(--tp-measure-wide);
    font-size: var(--tp-size-body);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text);
  }

  .tp-page__content > * + * {
    margin-top: var(--tp-space-5);
  }

  .tp-page__content h2,
  .tp-page__content h3 {
    font-weight: var(--tp-weight-regular);
    letter-spacing: var(--tp-track-title);
    color: var(--tp-color-ink);
    line-height: var(--tp-leading-heading);
  }

  .tp-page__content h2 {
    font-size: var(--tp-size-h2);
    text-transform: uppercase;
    margin-top: var(--tp-space-9);
  }

  .tp-page__content h3 {
    font-size: var(--tp-size-body-l);
  }

  .tp-page__content ul,
  .tp-page__content ol {
    padding-left: 1.2em;
  }

  .tp-page__content ul {
    list-style: disc;
  }

  .tp-page__content ol {
    list-style: decimal;
  }

  .tp-page__content a {
    border-bottom: var(--tp-border-brass);
  }

  /* Structural article list (Field Notes placeholder). */
  .tp-list {
    display: grid;
    gap: var(--tp-space-7);
  }

  .tp-list__item {
    padding-bottom: var(--tp-space-7);
    border-bottom: var(--tp-border-soft);
  }

  .tp-list__meta {
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-chip);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
    margin-bottom: var(--tp-space-2);
  }

  .tp-list__title {
    font-weight: var(--tp-weight-regular);
    font-size: var(--tp-size-h2-related);
    letter-spacing: var(--tp-track-title);
    color: var(--tp-color-ink);
    line-height: var(--tp-leading-heading);
  }

  .tp-list__excerpt {
    margin-top: var(--tp-space-3);
    max-width: var(--tp-measure-wide);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    color: var(--tp-color-text-body);
  }

  .tp-pagination-basic {
    margin-top: var(--tp-space-9);
    display: flex;
    justify-content: center;
    gap: var(--tp-space-6);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-l);
    letter-spacing: var(--tp-track-cta);
    text-transform: uppercase;
  }

  .tp-pagination-basic .page-numbers {
    color: var(--tp-color-gold-text);
  }

  .tp-pagination-basic .page-numbers.current {
    color: var(--tp-color-ink);
    border-bottom: var(--tp-border-brass);
    padding-bottom: 3px;
  }

  /* Catalogue archives own their gutters, so the commerce shell steps aside. */
  .tp-commerce--flush {
    padding: 0;
  }

  .tp-commerce__inner--flush {
    max-width: none;
  }

  .tp-catalogue {
    padding: 34px var(--tp-gutter) 84px;
    animation: tp-view 0.5s var(--tp-ease) both;
  }

  .tp-catalogue__inner {
    max-width: var(--tp-container);
    margin-inline: auto;
  }

  @media (max-width: 1099px) {
    .tp-catalogue {
      padding: 24px var(--tp-gutter) 58px;
    }
  }

  @media (max-width: 699px) {
    .tp-catalogue {
      padding: 18px var(--tp-gutter) 46px;
    }
  }

  /* WooCommerce default templates render inside this shell (skin: Phase 8). */
  .tp-commerce {
    padding: var(--tp-space-8) var(--tp-gutter) var(--tp-space-11);
  }

  .tp-commerce__inner {
    max-width: var(--tp-container);
    margin-inline: auto;
  }

  @media (max-width: 1099px) {
    .tp-page,
    .tp-commerce {
      padding-top: var(--tp-space-6);
      padding-bottom: var(--tp-space-10);
    }
  }

  @media (max-width: 699px) {
    .tp-page,
    .tp-commerce {
      padding-top: var(--tp-space-5);
      padding-bottom: var(--tp-space-9);
    }
  }

  /* ---- Salon → editorial transition ------------------------------------
     A persistent copy of the Salon plate that survives the handoff. It sits
     beneath the Salon's own chrome while the zoom runs (the two layers are
     identical and travel together), and rises above the destination once that
     has mounted underneath it. Durations are set inline from the PHP config so
     the zoom, the bridge and the destination band share one source. */
  .tp-bridge {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
  }

  .tp-bridge.is-over {
    z-index: 60;
  }

  .tp-bridge.is-fading {
    opacity: 0;
  }

  .tp-bridge__plate {
    position: absolute;
    transform-origin: 0 0;
    will-change: transform;
  }

  .tp-bridge__plate img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* The Salon's own furniture steps aside on its own curve rather than being
     cut off by the handoff. */
  .tp-travelling .tp-salon__chrome,
  .tp-travelling .tp-header--salon {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.38s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .tp-bridge {
      display: none;
    }
  }
}