/* EchoToFuture Responsive Layout V2
   Goal: better scaling on mobile, desktop, large monitors and ultrawide screens.
*/

:root {
  --e2f-page-max: 1560px;
  --e2f-page-pad: clamp(14px, 4vw, 84px);
  --e2f-section-gap: clamp(22px, 4vw, 58px);
  --e2f-card-pad: clamp(18px, 3vw, 38px);
}

/* General public layout scaling */
main {
  width: min(var(--e2f-page-max), calc(100vw - (var(--e2f-page-pad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep text readable on very wide screens */
main p,
main li {
  max-width: 82ch;
}

/* But allow admin tables/cards and form elements to use their own width */
.e2fa-shell p,
.e2fa-shell li,
.e2fa-table p,
.e2fa-table li,
form p,
form li,
table p,
table li {
  max-width: none;
}

/* Public content spacing */
main section,
main article,
main form,
main .e2f-polish-note,
main .e2f-legal-update {
  padding: var(--e2f-card-pad);
}

main > * + * {
  margin-top: clamp(16px, 2.4vw, 34px);
}

/* Responsive media and assets */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Forms should feel good on all screens */
main form {
  width: 100%;
  box-sizing: border-box;
}

main input,
main select,
main textarea,
main button {
  max-width: 100%;
  box-sizing: border-box;
}

/* Buttons and CTA areas */
main button,
main .button,
main .btn,
main a.button,
main input[type="submit"] {
  min-height: 44px;
  padding-left: clamp(16px, 2.4vw, 28px);
  padding-right: clamp(16px, 2.4vw, 28px);
}

/* Large desktop */
@media (min-width: 1280px) {
  :root {
    --e2f-page-max: 1440px;
    --e2f-page-pad: clamp(38px, 5vw, 96px);
  }

  main h1 {
    font-size: clamp(3.1rem, 4.5vw, 5.8rem);
  }

  main h2 {
    font-size: clamp(1.7rem, 2.4vw, 3rem);
  }

  main p,
  main li {
    font-size: clamp(1rem, .72vw, 1.14rem);
  }
}

/* Full HD and bigger */
@media (min-width: 1600px) {
  :root {
    --e2f-page-max: 1640px;
    --e2f-page-pad: clamp(64px, 6vw, 140px);
  }

  main {
    width: min(var(--e2f-page-max), calc(100vw - (var(--e2f-page-pad) * 2))) !important;
  }
}

/* Ultrawide monitors */
@media (min-width: 2200px) {
  :root {
    --e2f-page-max: 1840px;
    --e2f-page-pad: 180px;
  }

  main {
    width: min(var(--e2f-page-max), calc(100vw - 360px)) !important;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --e2f-page-pad: clamp(14px, 3vw, 32px);
    --e2f-card-pad: clamp(16px, 3vw, 28px);
  }

  main {
    width: min(100vw - 28px, 960px) !important;
  }

  main h1 {
    font-size: clamp(2.35rem, 7vw, 4rem);
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --e2f-page-pad: 10px;
    --e2f-card-pad: 16px;
    --e2f-section-gap: 22px;
  }

  main {
    width: calc(100vw - 16px) !important;
  }

  main h1 {
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1.03;
  }

  main h2 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  main p,
  main li {
    font-size: 1rem;
    line-height: 1.68;
  }

  main form,
  main section,
  main article,
  main .e2f-polish-note,
  main .e2f-legal-update {
    border-radius: 18px;
  }

  main input,
  main select,
  main textarea,
  main button,
  main .button,
  main .btn,
  main a.button,
  main input[type="submit"] {
    width: 100%;
  }

  .e2f-trust-row {
    grid-template-columns: 1fr !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  main {
    width: calc(100vw - 10px) !important;
  }

  main h1 {
    font-size: clamp(1.82rem, 10vw, 2.45rem);
  }

  main form,
  main section,
  main article,
  main .e2f-polish-note,
  main .e2f-legal-update {
    padding: 13px;
  }
}

/* Prevent horizontal overflow from long strings */
main {
  overflow-wrap: anywhere;
}

main table {
  max-width: 100%;
}

main pre,
main code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Admin remains usable and wide enough */
.e2fa-shell {
  width: min(1540px, calc(100vw - 28px)) !important;
}

@media (min-width: 1700px) {
  .e2fa-shell {
    width: min(1680px, calc(100vw - 96px)) !important;
  }
}

@media (max-width: 700px) {
  .e2fa-shell {
    width: calc(100vw - 12px) !important;
  }
}