/* =============================================================================
   FORM — entry form and the dialog that hosts it.

   NOT shared between products. The two builds diverged: this product's
   .entry__head is centre-aligned, its .entry__title is weight 800, and the
   spacing differs throughout. Merging them would change one of the two
   approved designs, so each keeps its own file.

   If both should look the same later, pick one, copy it over the other, and
   check the result against the approved screens before shipping.
   ========================================================================== */

/* =============================================================================
   ENTRY FORM PAGE
   Standalone page styles. Depends only on the tokens in base.css.
   ========================================================================== */

.entry-page {
  background: var(--white);
  min-height: 100svh;
}

.entry {
  padding-block: clamp(1.75rem, 6vw, 3.5rem);
  padding-inline: var(--gutter);
}

.entry__shell {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

/* ---- Head ---------------------------------------------------------------- */

.entry__head { text-align: center; }

.entry__title {
    font-family: var(--font-display);
    font-size:clamp(1.25rem, 0.15rem + 1.1vw, 1.7rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--red-600);
    display: block;
    margin-bottom: 6px;
}
.entry__rule {
  display: block;
  width: 3.25rem;
  height: 3px;
  margin: 0.25rem auto 0;
  border-radius: 2px;
  background: var(--ink-900);
}

.entry__sub {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.05rem);
  line-height: 1.45;
  color: var(--ink-900);
}

/* ---- Form ---------------------------------------------------------------- */

.entry__form {
  display: grid;
  gap: clamp(0.7rem, 2.6vw, 0.95rem);
  margin-top: clamp(1.25rem, 5vw, 2rem);
}

/* Honeypot. Kept out of the layout without display:none, which some bots
   check for, and out of the a11y tree and tab order. */
.entry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Upload -------------------------------------------------------------- */

.upload { position: relative; }

/* Visually hidden but still focusable, so keyboard users get a focus ring
   on the label via :focus-within */
.upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload__drop {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  padding: clamp(1.25rem, 5vw, 1.9rem) 1rem;
  border: 2px dashed var(--red-600);
  border-radius: 18px;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.upload__drop:hover,
.upload:focus-within .upload__drop,
.upload.is-dragging .upload__drop {
  background: color-mix(in srgb, var(--red-600) 6%, transparent);
  border-color: var(--red-700);
}

.upload:focus-within .upload__drop {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.upload__icon {
  width: clamp(2.5rem, 11vw, 3.25rem);
  height: auto;
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upload__icon-plus-bg { fill: var(--white); }
.upload__icon-plus { stroke-width: 3.4; }

.upload__label {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.88rem + 0.5vw, 1.1rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--red-600);
}

.upload__hint {
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

/* ---- Chosen file --------------------------------------------------------- */

.upload__preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sand);
}

.upload__thumb {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sand-2);
  display: grid;
  place-items: center;
}

.upload__thumb img,
.upload__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload__meta { min-width: 0; flex: 1; }

.upload__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload__size { font-size: var(--fs-xs); color: var(--ink-400); }

.upload__clear {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--red-600);
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    display: flex;
    place-items: center;
    align-items: center;
    justify-content: center;
    line-height: revert;
    padding-bottom: 10px;
}

/* ---- Text fields --------------------------------------------------------- */

.field { position: relative; }

.field__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1.1rem;
  border: 2px solid var(--red-600);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 0.86rem + 0.35vw, 1rem);
  /* 16px minimum on iOS, or Safari zooms the page on focus */
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

@supports (-webkit-touch-callout: none) {
  .field__input { font-size: 16px; }
}

.field__input::placeholder {
  color: var(--red-600);
  opacity: 1; /* Firefox dims placeholders by default */
}

.field__input:focus {
  outline: none;
  border-color: var(--red-700);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-600) 22%, transparent);
}

.field__input[aria-invalid='true'] { border-color: #B00020; }

.field__error {
  display: none;
  margin-top: 0.3rem;
  padding-inline: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #B00020;
}

.field__error.is-shown { display: block; }

/* ---- Submit -------------------------------------------------------------- */

.entry__submit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 3.5rem;
  margin-top: 0.35rem;
  border-radius: 14px;
  background: var(--red-600);
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.4rem);
  font-weight: 800;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.entry__submit:hover { background: var(--red-700); }
.entry__submit:active { transform: translateY(1px); }

.entry__submit[disabled] { opacity: 0.65; cursor: not-allowed; }

.entry__spinner {
  display: none;
  position: absolute;
  right: 1.1rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 2.5px solid color-mix(in srgb, var(--white) 45%, transparent);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: entry-spin 0.7s linear infinite;
}

.entry__submit.is-busy .entry__spinner { display: block; }

@keyframes entry-spin { to { transform: rotate(360deg); } }

/* ---- Progress ------------------------------------------------------------ */

.entry__progress { margin-top: 0.15rem; }

.entry__progress-bar {
  height: 6px;
  width: 0%;
  border-radius: 3px;
  background: var(--grad-accent);
  transition: width 0.2s linear;
}

.entry__progress-text {
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  text-align: center;
}

/* ---- Terms and status ---------------------------------------------------- */

.entry__terms {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 0.85rem + 0.35vw, 1rem);
  font-weight: 800;
  text-align: center;
  color: var(--ink-900);
}

.entry__status {
  display: none;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

.entry__status.is-shown { display: block; }
.entry__status.is-ok { background: #E7F6EC; color: #17632F; }
.entry__status.is-error { background: #FDECEE; color: #B00020; }

@media (prefers-reduced-motion: reduce) {
  .entry__spinner { animation-duration: 2s; }
}

/* =============================================================================
   ENTRY MODAL
   The same form, shown in a <dialog> on the main page. Styles above are
   shared; only the shell differs.
   ========================================================================== */

.entry-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(88svh, 52rem);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 40px 80px -30px rgba(35, 18, 8, 0.55);
  overflow: hidden;
}

/* The dialog sits in the top layer, so the page cannot be scrolled behind it
   by wheel — but Lenis is stopped in JS as well, since it drives its own
   transform that would otherwise keep animating underneath. */
.entry-dialog::backdrop {
  background: rgba(35, 12, 8, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.entry-dialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

/* ---- Close button --------------------------------------------------------
   Anchored to the panel rather than a header block, because the heading now
   arrives inside the fetched markup along with the fields.
   ------------------------------------------------------------------------- */
.entry-dialog__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sand);
    color: var(--ink-900);
    font-size: 24px;
    line-height: 1;
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    padding-bottom: 10px;
}

.entry-dialog__close:hover {
  background: var(--red-600);
  color: var(--white);
  transform: rotate(90deg);
}

/* ---- Scrolling body ------------------------------------------------------
   The form is taller than a phone screen, so this scrolls rather than the
   dialog growing past the viewport. data-lenis-prevent on the element keeps
   Lenis away from wheel events that belong to this container.
   ------------------------------------------------------------------------- */

.entry-dialog__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Top padding clears the close button, which floats over this area */
  padding: clamp(1.25rem, 5vw, 1.75rem) clamp(1.25rem, 5vw, 2rem);
}

/* The page-level wrapper is redundant inside the dialog */
.entry-dialog__body .entry__shell { max-width: none; }

/* Keep the heading clear of the close button */
.entry-dialog__body .entry__title { padding-inline: 1.75rem; }

.entry-dialog__loading {
  padding: var(--sp-lg) 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-400);
}

/* ---- Motion --------------------------------------------------------------- */

.entry-dialog[open] {
  animation: dialog-in 0.32s var(--ease-out);
}

.entry-dialog[open]::backdrop {
  animation: backdrop-in 0.32s var(--ease-out);
}

.entry-dialog.is-closing { animation: dialog-out 0.22s var(--ease-in-out) forwards; }
.entry-dialog.is-closing::backdrop { animation: backdrop-out 0.22s var(--ease-in-out) forwards; }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes dialog-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .entry-dialog[open],
  .entry-dialog[open]::backdrop,
  .entry-dialog.is-closing,
  .entry-dialog.is-closing::backdrop { animation: none; }
}

/* ---- Small screens: full-height sheet ------------------------------------ */

@media (max-width: 30em) {
  .entry-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 92svh;
    margin: auto auto 0;
    border-radius: 20px 20px 0 0;
  }

  @keyframes dialog-in {
    from { opacity: 0; transform: translateY(3%); }
    to   { opacity: 1; transform: none; }
  }
}

.gg-entry {
    padding: 20px 0;
}
h1.entry__share {
    line-height: 1.25;
}