/* 2Lúa 2.4.9 — single responsive content width across templates.
   Loaded after route-specific CSS to resolve legacy width/max-width conflicts.
   Only layout geometry is changed; hero art and content typography remain intact. */
:root { --tl-site-content-max: 1200px; --tl-site-content-half: 600px; --tl-site-desktop-gutter: 24px; }

/* Desktop: same content shell for home, workspace, legal, news, contact, accounts and footer. */
@media (min-width: 820px) {
  .tl-app .tl-container,
  .tl-site-footer .tl-container,
  body.home .tl-site-footer .tl-container {
    box-sizing: border-box;
    width: min(calc(100% - 48px), var(--tl-site-content-max));
    max-width: var(--tl-site-content-max);
    margin-left: auto;
    margin-right: auto;
  }

  /* The policy page had a leftover max-width:980px in app.css. */
  .tl-policy-page .tl-policy-wrap,
  .tl-contact-page .tl-contact-wrap,
  .tl-app .tl-news-page,
  .tl-app .tl-article-shell,
  .tl-app .tl-workspace-layout {
    max-width: var(--tl-site-content-max);
  }

  .tl-policy-page .tl-legal-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    min-width: 0;
  }

  /* On large monitors the home hero remains full-bleed by design,
     while sections below it share the 1200px site grid. */
  .tl-reference-home .tl-v2-hero {
    margin-left: calc(-1 * max(24px, calc(50vw - var(--tl-site-content-half))));
    margin-right: calc(-1 * max(24px, calc(50vw - var(--tl-site-content-half))));
    padding-left: max(24px, calc(50vw - var(--tl-site-content-half)));
    padding-right: max(24px, calc(50vw - var(--tl-site-content-half)));
  }
  .tl-reference-home .tl-v2-trust {
    left: max(36px, calc(50vw - var(--tl-site-content-half) + 12px));
  }
}

/* Laptop/tablet with the floating global left dock: reserve its own column.
   Matches the existing navigation-unified.css geometry. */
@media (min-width: 820px) and (max-width: 1400px) {
  .tl-app .tl-v2-main,
  .tl-app .tl-workspace-layout,
  .tl-app .tl-policy-wrap,
  .tl-app .tl-contact-wrap,
  .tl-app .tl-news-page,
  .tl-app .tl-article-shell,
  .tl-app .tl-account-wrap,
  .tl-app .tl-profile-wrap,
  .tl-app .tl-social-layout,
  .tl-site-footer .tl-footer-grid,
  .tl-site-footer .tl-footer-bottom,
  body.home .tl-site-footer .tl-footer-grid,
  body.home .tl-site-footer .tl-footer-bottom {
    width: calc(100% - 112px);
    max-width: var(--tl-site-content-max);
    margin-left: 99px;
    margin-right: 13px;
  }
  .tl-policy-page .tl-legal-layout {
    grid-template-columns: minmax(195px, 230px) minmax(0, 1fr);
  }
}

/* Below 1000px the legal navigation stays to the left if there is room;
   stack it before the policy only where two columns would feel cramped. */
@media (min-width: 820px) and (max-width: 999px) {
  .tl-policy-page .tl-legal-layout { grid-template-columns: minmax(0, 1fr); }
  .tl-policy-page .tl-legal-nav { position: static; }
  .tl-policy-page .tl-legal-nav nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .tl-policy-page .tl-legal-nav nav a { padding: 8px 10px; }
  .tl-policy-page .tl-legal-help { display: none; }
}

/* Mobile: consistent safe side padding and readable column width. */
@media (max-width: 819px) {
  .tl-app .tl-container,
  .tl-site-footer .tl-container,
  .tl-app .tl-news-page,
  .tl-app .tl-article-shell,
  .tl-app .tl-contact-wrap,
  .tl-app .tl-policy-wrap {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 660px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tl-policy-page .tl-policy-wrap {
    padding-top: max(82px, calc(75px + env(safe-area-inset-top)));
    padding-bottom: calc(105px + env(safe-area-inset-bottom));
  }
  .tl-policy-page .tl-legal-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 430px) {
  .tl-app .tl-container,
  .tl-site-footer .tl-container,
  .tl-app .tl-news-page,
  .tl-app .tl-article-shell,
  .tl-app .tl-contact-wrap,
  .tl-app .tl-policy-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* v2.4.10: precisely scope the legal sizing correction to the four policy pages.
   The overall page shell is 1200px; long-form prose stays a comfortable measure.
   Non-legal pages keep the v2.4.9 alignment rules. */
@media (min-width: 820px) {
  .tl-app.tl-policy-page--legal > .tl-policy-wrap {
    box-sizing: border-box;
    width: min(calc(100% - 48px), 1200px);
    max-width: 1200px;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .tl-policy-page--legal .tl-legal-layout {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(215px, 260px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }
  .tl-policy-page--legal .tl-legal-layout > * { min-width: 0; }
  .tl-policy-page--legal .tl-policy-card--legal { max-width: none; width: 100%; }
}
/* The desktop dock exists in the current theme at >=820px. When present,
   legal content must clear it; below that breakpoint there is no left dock. */
@media (min-width: 820px) and (max-width: 1400px) {
  .tl-app.tl-policy-page--legal > .tl-policy-wrap {
    width: calc(100% - 112px);
    max-width: 1200px;
    margin-left: 99px;
    margin-right: 13px;
  }
  .tl-policy-page--legal .tl-legal-layout {
    grid-template-columns: minmax(195px, 230px) minmax(0, 1fr);
  }
}
@media (min-width: 820px) and (max-width: 999px) {
  .tl-policy-page--legal .tl-legal-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 819px) {
  .tl-app.tl-policy-page--legal > .tl-policy-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
  .tl-policy-page--legal .tl-legal-layout { grid-template-columns: minmax(0,1fr); }
  .tl-policy-page--legal .tl-policy-card--legal { min-width: 0; width: 100%; }
}
@media (max-width: 430px) {
  .tl-app.tl-policy-page--legal > .tl-policy-wrap {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* The 2Lúa home is the landing page: retain a wider canvas on large desktop
   without widening policy, contact, SEO articles or functional pages. */
@media (min-width: 1401px) {
  .tl-app.tl-reference-home .tl-container {
    box-sizing: border-box;
    width: min(calc(100% - 188px), 1320px);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
  .tl-app.tl-reference-home .tl-v2-hero {
    margin-left: calc(-1 * max(32px, (100vw - 1320px) / 2));
    margin-right: calc(-1 * max(32px, (100vw - 1320px) / 2));
    padding-left: max(32px, (100vw - 1320px) / 2);
    padding-right: max(32px, (100vw - 1320px) / 2);
  }
  .tl-app.tl-reference-home .tl-v2-trust {
    left: max(40px, calc((100vw - 1320px) / 2 + 12px));
  }
}