/* Lenspire layout system
   Final-cascade geometry only: spacing, alignment, sizing, and responsive flow. */

:root {
  --layout-gutter: clamp(16px, 4.5vw, 54px);
  --layout-section: clamp(48px, 6vw, 72px);
  --layout-section-compact: clamp(32px, 4vw, 48px);
  --layout-card-pad: clamp(20px, 2.25vw, 28px);
  --layout-control-h: 44px;
  --layout-copy: 68ch;
}

html { overflow-x: hidden; }
body { min-width: 0; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, p, li, label, small, span { overflow-wrap: break-word; }

/* Shared content edges and safe grid children. */
.studio-app .studio-nav,
.studio-app main,
.studio-app footer,
.legal-nav,
.legal-shell,
.legal-footer,
.pricing-site .ls-nav,
.pricing-main,
.lenspire-site:not(.pricing-site) > main,
.lenspire-site .ls-footer {
  width: min(var(--container), calc(100vw - (var(--layout-gutter) * 2)));
  margin-inline: auto;
}

.studio-app main > *,
.studio-app section > *,
.lenspire-site main > *,
.lenspire-site section > *,
.pricing-main > *,
.login-shell > * {
  min-width: 0;
}

/* Authenticated studio and guest pages. */
.studio-app main {
  padding-block: var(--layout-section-compact) var(--layout-section);
  padding-inline: 0;
}

.studio-workspace .studio-nav {
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--layout-gutter);
}

.studio-app.guest-app main,
.studio-app.access-app main {
  padding: var(--layout-section-compact) 0 var(--layout-section);
}

.studio-app .studio-page-hero,
.studio-app .studio-hero,
.studio-app .event-hero,
.studio-app .event-settings-hero,
.studio-app .account-hero,
.studio-app .platform-hero,
.studio-app .subscription-hero {
  margin: 0;
  padding: 0 0 var(--layout-section-compact);
}

.studio-app .studio-page-hero,
.studio-app .studio-hero,
.studio-app .event-hero,
.studio-app .account-hero,
.studio-app .platform-hero,
.studio-app .subscription-hero {
  align-items: end;
}

.studio-app .event-back,
.studio-app .account-hero .event-back,
.studio-app .platform-hero .event-back,
.studio-app .subscription-hero .event-back {
  margin: 0 0 var(--space-5);
}

.studio-app .eyebrow,
.studio-app .event-hero .eyebrow,
.studio-app .event-settings-card .eyebrow,
.studio-app .studio-dashboard-card .eyebrow,
.studio-app .subscription-usage .eyebrow,
.studio-app .subscription-section-heading .eyebrow,
.studio-app .subscription-history .eyebrow,
.studio-app .checkout-card .eyebrow {
  margin: 0 0 var(--space-3);
}

.studio-app .studio-section-heading,
.studio-app .event-gallery-heading,
.studio-app .subscription-section-heading {
  margin: 0 0 var(--space-6);
}

.studio-app .studio-section-heading > div,
.studio-app .event-gallery-heading > div,
.studio-app .subscription-section-heading > div {
  min-width: 0;
}

.studio-app .studio-dashboard-grid,
.studio-app .studio-kpis,
.studio-app .studio-event-grid,
.studio-app .event-kpis,
.studio-app .event-actions-grid,
.studio-app .event-organize-grid,
.studio-app .event-settings-grid,
.studio-app .account-grid,
.studio-app .platform-grid,
.studio-app .subscription-plan-grid {
  align-items: stretch;
  margin-inline: 0;
}

.studio-app .studio-section-heading,
.studio-app .studio-kpis,
.studio-app .studio-event-grid,
.studio-app .event-kpis,
.studio-app .event-actions-grid,
.studio-app .event-organize,
.studio-app .event-processing,
.studio-app .event-insights,
.studio-app .event-gallery-heading,
.studio-app .event-gallery,
.studio-app .event-danger,
.studio-app .team-workspace,
.studio-app .platform-studios,
.studio-app .subscription-usage,
.studio-app .subscription-history {
  margin-left: 0;
  margin-right: 0;
}

.studio-app .studio-dashboard-card,
.studio-app .studio-kpis > article,
.studio-app .studio-event-card,
.studio-app .event-kpis > article,
.studio-app .event-action,
.studio-app .event-organize-card,
.studio-app .event-settings-card,
.studio-app .event-settings-tool,
.studio-app .account-card,
.studio-app .platform-create-card,
.studio-app .platform-studio-list,
.studio-app .subscription-plan {
  min-width: 0;
  height: 100%;
}

.studio-app .studio-dashboard-icon,
.studio-app .studio-kpi-icon,
.studio-app .event-settings-icon,
.studio-app .account-card-icon,
.studio-app .access-icon,
.studio-app .guest-pin-icon,
.studio-app .checkout-icon {
  margin: 0 0 var(--space-5);
}

.studio-app .studio-kpis small,
.studio-app .subscription-plan > small,
.public-plan > small,
.studio-app .team-member small,
.studio-app .platform-studios small {
  margin: var(--space-1) 0 0;
}

.studio-app .event-access-tags { margin: var(--space-5) 0 0; }
.studio-app .event-actions-grid { margin-top: var(--space-7); margin-bottom: var(--space-8); }
.studio-app .event-gallery-heading { margin-top: var(--layout-section-compact); }
.studio-app .event-danger { margin-top: var(--layout-section); }
.studio-app .event-settings-form,
.studio-app .event-settings-tool form,
.studio-app .event-settings-tool-actions,
.studio-app .account-card form,
.studio-app .guest-pin-card form,
.studio-app .guest-search-card form,
.studio-app .access-card form,
.studio-app .team-add-form,
.studio-app .platform-studios {
  margin-left: 0;
  margin-right: 0;
}

.studio-app .event-settings-form,
.studio-app .event-settings-tool form,
.studio-app .account-card form,
.studio-app .guest-pin-card form,
.studio-app .guest-search-card form,
.studio-app .access-card form {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

.studio-app .event-settings-tools,
.studio-app .event-settings-tool-actions { margin: var(--space-6) 0 0; }
.studio-app .team-workspace { margin-top: var(--space-7); }
.studio-app .team-member-list { margin: var(--space-6) 0 0; }
.studio-app .team-add-form { margin-top: var(--space-6); margin-bottom: 0; }

.studio-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.studio-app select,
.studio-app textarea {
  min-width: 0;
  min-height: var(--layout-control-h);
}

.studio-app form button:not(.event-icon-button):not(.studio-nav-toggle),
.studio-app .studio-button,
.studio-app .access-button-link {
  min-height: 42px;
}

.studio-app .event-upload-form,
.studio-app .event-upload-modes,
.studio-app .event-upload-album,
.studio-app .event-drop,
.studio-app .event-upload-progress,
.studio-app .subscription-history-table,
.studio-app .team-workspace,
.studio-app .platform-studio-list {
  width: 100%;
  min-width: 0;
}

.studio-app .event-upload-selection { margin: var(--space-4) 0 0; }
.studio-app .event-upload-progress { margin: var(--space-4) 0 0; }
.studio-app .event-upload-form > button { width: 100%; margin-top: var(--space-5); }
.studio-app .guest-access-points,
.studio-app .guest-find-points,
.studio-app .access-points { margin: var(--space-6) 0 0; }
.studio-app .guest-access-points span::before,
.studio-app .guest-find-points span::before,
.studio-app .access-points span::before { margin: 0 var(--space-2) 0 0; }
.studio-app .guest-pin-card > small,
.studio-app .guest-results-link { margin: var(--space-5) 0 0; }
.studio-app .account-google-note { margin: var(--space-6) 0 0; }
.studio-app .access-button-link { margin: var(--space-6) 0 0; }

/* Subscription and checkout pages share the studio edge. */
.subscription-workspace main {
  padding: var(--layout-section-compact) 0 var(--layout-section);
}

.studio-app .subscription-usage {
  margin-top: 0;
  margin-bottom: var(--layout-section-compact);
}

.studio-app .subscription-plan-section { padding: 0 0 var(--layout-section-compact); }
.studio-app .subscription-plan form { width: 100%; margin: auto 0 0; }
.studio-app .subscription-history { padding: var(--layout-section-compact) 0 0; }
.studio-app .checkout-stage { min-height: calc(100vh - var(--header-h) - 150px); }
.studio-app .checkout-card { margin-inline: auto; }

/* Public landing and pricing pages. */
.lenspire-site:not(.pricing-site) > main { padding: 0; }
.lenspire-site main > section { min-width: 0; }

.ls-hero {
  padding: var(--layout-section-compact) 0 var(--layout-section);
}

.ls-hero,
.ls-sections,
.ls-experience,
.ls-ai-showcase,
.ls-capability-showcase,
.ls-event-engagement,
.ls-gallery-showcase,
.ls-workflow-proof,
.ls-pricing,
.ls-studio-notes,
.ls-faq {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.ls-ai-showcase,
.ls-workflow-proof,
.ls-faq { max-width: 1100px; }

.ls-sections,
.ls-experience,
.ls-event-engagement,
.ls-gallery-showcase,
.ls-how,
.ls-workflow-proof,
.ls-pricing,
.ls-studio-notes,
.ls-faq {
  padding-top: var(--layout-section);
  padding-bottom: var(--layout-section);
}

.ls-ai-showcase { padding-top: var(--layout-section-compact); padding-bottom: var(--layout-section); }
.ls-gallery-showcase,
.ls-pricing,
.ls-studio-notes,
.ls-faq { padding-inline: clamp(0px, 3vw, var(--space-9)); }

.ls-capability-tabs { margin: var(--layout-section-compact) auto var(--space-6); }
.ls-capability-showcase { padding: 0 0 var(--layout-section); }
.ls-kpi-highlights { padding: var(--layout-section-compact) 0; }
.ls-capability-grid,
.ls-engagement-grid,
.ls-gallery-cards,
.ls-note-grid { margin: var(--space-8) 0 0; }
.ls-capability-detail { margin: var(--layout-section-compact) auto 0; }
.ls-capability-detail .ls-capability-flow { margin-top: var(--space-7); }
.ls-how h2 { margin: var(--space-7) 0 var(--space-8); }
.ls-cta { width: 100%; margin: var(--layout-section-compact) 0; }

.ls-capability-grid article,
.ls-engagement-grid article,
.ls-gallery-cards article,
.ls-note-grid article,
.ls-audience-grid article {
  min-width: 0;
  height: 100%;
}

.ls-capability-grid h3,
.ls-note-grid h3,
.ls-experience-copy h3 { margin-left: 0; margin-right: 0; }
.ls-capability-grid small { margin: auto 0 0; }
.ls-ai-points { margin-left: 0; margin-right: 0; }
.ls-footer-rich .ls-footer-brand,
.ls-footer-bottom { margin-left: 0; margin-right: 0; }

.pricing-site .pricing-main { padding: var(--layout-section) 0; }
.pricing-hero { padding: 0 0 var(--layout-section); }
.pricing-hero .ls-kicker,
.public-plan-heading,
.public-plan-heading .ls-kicker { margin-left: 0; margin-right: 0; }
.public-plan-section { padding: 0 0 var(--layout-section-compact); }
.public-plan { min-width: 0; height: 100%; }
.public-plan form { width: 100%; margin-top: auto; }

/* Login and account-access alignment. */
.login-stage { padding: var(--layout-section-compact) var(--layout-gutter); }
.login-shell { width: min(820px, 100%); align-items: stretch; }
.login-intro,
.login-card { padding: var(--layout-card-pad); }
.login-highlights { margin: var(--space-6) 0 0; }
.login-submit { width: 100%; margin: var(--space-2) 0 0 !important; }
.login-submit span { margin: 0 0 0 var(--space-2); }
.login-page .login-form input { width: 100%; }
.login-page .password-field input { padding-right: var(--space-10); }

/* Legal content keeps a readable text measure while using the shared edge. */
.legal-shell { padding: var(--layout-section) 0; }
.legal-shell > * { max-width: 860px; }
.legal-shell section { padding: var(--space-7) 0; }
.legal-shell p { max-width: var(--layout-copy); }
.legal-footer { align-items: center; }

/* Tablet: reduce columns before content becomes cramped. */
@media (max-width: 1000px) {
  :root { --layout-section: 56px; --layout-section-compact: 40px; }

  .studio-app .studio-page-hero,
  .studio-app .studio-hero,
  .studio-app .event-hero,
  .studio-app .account-hero,
  .studio-app .platform-hero,
  .studio-app .subscription-hero {
    align-items: start;
  }

  .studio-app .subscription-plan-grid--annual,
  .public-plan-grid--annual { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ls-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root {
    --layout-gutter: clamp(16px, 5vw, 28px);
    --layout-section: 48px;
    --layout-section-compact: 32px;
    --layout-card-pad: 20px;
  }

  .studio-app main,
  .subscription-workspace main,
  .pricing-site .pricing-main,
  .legal-shell { padding-top: var(--layout-section-compact); padding-bottom: var(--layout-section); }

  .studio-workspace .studio-nav { padding-inline: var(--layout-gutter); }
  .studio-app .studio-page-hero,
  .studio-app .studio-hero,
  .studio-app .event-hero,
  .studio-app .event-settings-hero,
  .studio-app .account-hero,
  .studio-app .platform-hero,
  .studio-app .subscription-hero { padding-bottom: var(--layout-section-compact); }

  .studio-app .studio-section-heading,
  .studio-app .event-gallery-heading,
  .studio-app .subscription-section-heading,
  .public-plan-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
  }

  .studio-app .subscription-section-heading > p,
  .public-plan-heading > p { max-width: var(--layout-copy); text-align: left; }

  .studio-app .event-actions-grid { margin-top: var(--space-6); margin-bottom: var(--space-7); }
  .studio-app .event-danger { margin-top: var(--layout-section-compact); }
  .studio-app .event-settings-card,
  .studio-app .event-settings-tool,
  .studio-app .account-card,
  .studio-app .platform-create-card,
  .studio-app .platform-studio-list,
  .studio-app .guest-pin-card,
  .studio-app .guest-search-card,
  .studio-app .access-card,
  .studio-app .checkout-card,
  .studio-app .subscription-usage,
  .studio-app .subscription-plan { padding: var(--layout-card-pad); }

  .studio-app .subscription-plan-grid--annual,
  .studio-app .subscription-plan-grid--quarterly,
  .public-plan-grid--annual,
  .public-plan-grid--quarterly { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }

  .studio-app .subscription-history { grid-template-columns: 1fr; gap: var(--space-6); }
  .studio-app .subscription-history-table { overflow-x: auto; }
  .studio-app .subscription-history-row { min-width: 540px; }

  .ls-sections,
  .ls-experience,
  .ls-ai-showcase,
  .ls-event-engagement,
  .ls-gallery-showcase,
  .ls-how,
  .ls-workflow-proof,
  .ls-pricing,
  .ls-studio-notes,
  .ls-faq { padding-top: var(--layout-section); padding-bottom: var(--layout-section); }

  .ls-gallery-showcase,
  .ls-pricing,
  .ls-studio-notes,
  .ls-faq { padding-inline: 0; }
  .ls-capability-tabs { margin-top: var(--layout-section-compact); }
  .ls-capability-detail { margin-top: var(--space-7); }
  .ls-capability-grid,
  .ls-engagement-grid,
  .ls-gallery-cards,
  .ls-note-grid { margin-top: var(--space-7); }

  .login-stage { align-items: start; padding-block: var(--space-5); }
  .login-intro,
  .login-card { padding: var(--space-6); }
  .login-intro .login-eyebrow { margin: var(--space-6) 0 var(--space-3); }
}

@media (max-width: 540px) {
  .studio-app .subscription-plan-grid--annual,
  .studio-app .subscription-plan-grid--quarterly,
  .public-plan-grid--annual,
  .public-plan-grid--quarterly,
  .ls-capability-grid { grid-template-columns: 1fr; }

  .studio-app .studio-button,
  .studio-app .access-button-link,
  .studio-app .studio-page-actions > a,
  .public-plan button { width: 100%; }

  .studio-app .event-upload-modes { grid-template-columns: 1fr; }
  .studio-app .event-upload-album { align-items: stretch; grid-template-columns: 1fr; }
  .studio-app .event-upload-album select { width: 100%; }

  .ls-capability-flow-slide { grid-template-columns: 42px minmax(0, 1fr) 26px; }
  .ls-capability-flow-slide > span { width: 42px; height: 42px; }

  .legal-footer { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}