/*
 * First-visit newsletter popup. Tokens from Figma node 1:552.
 * Layout: dialog 1136×608 with photo on the left + copy/form on the
 * right. On small viewports the photo collapses to a top banner.
 */
:root {
  --weilo-pp-bg:        #EFE8DC;     /* brand/cream-dark */
  --weilo-pp-text:      #14120F;     /* neutro/negro-profundo */
  --weilo-pp-text-grey: #736E66;
  --weilo-pp-yellow:    #EDFF5A;
  --weilo-pp-radius:    32px;
}

.weilo-popup, .weilo-popup * { box-sizing: border-box; }

.weilo-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 1;
  transition: opacity 220ms ease;
}
.weilo-popup.is-hidden { display: none; }
.weilo-popup.is-leaving { opacity: 0; pointer-events: none; }

.weilo-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.62);
  cursor: pointer;
}

.weilo-popup__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(1136px, 100%);
  /* Aim for the Figma height but allow growth on viewports that need it
     (or shrinking on shorter ones) and let the content scroll if it
     does end up taller than the viewport. */
  min-height: min(608px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  background: var(--weilo-pp-bg);
  border-radius: var(--weilo-pp-radius);
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
}

/* ---------- Photo (left) ---------- */
.weilo-popup__photo {
  position: relative;
  overflow: hidden;
  min-height: 0;             /* keep image's intrinsic ratio from inflating the row */
}
.weilo-popup__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Copy + form (right) ---------- */
.weilo-popup__copy {
  padding: 56px 32px;
  overflow-y: auto;             /* scroll if very small viewports */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.weilo-popup__eyebrow {
  margin: 0 0 12px;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--weilo-pp-text);
}
.weilo-popup__title {
  margin: 0 auto 32px;
  max-width: 560px;
  font-family: "PP Nikkei Journal", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: 80px;
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  color: var(--weilo-pp-text);
  hyphens: none;
  -webkit-hyphens: none;
}

/* ---------- Form ---------- */
.weilo-popup__form {
  margin: 0 auto;
  max-width: 415px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  overflow: hidden;
}
input.weilo-popup__input {
  display: block;
  width: 100%;
  height: 72px;
  padding: 0 36px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--weilo-pp-text);
  color: var(--weilo-pp-text);
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  outline: none;
  transition: border-color 200ms ease;
}
input.weilo-popup__input::placeholder { color: var(--weilo-pp-text); opacity: 0.85; }
input.weilo-popup__input:focus-visible { border-color: var(--weilo-pp-yellow); }
input.weilo-popup__input.is-invalid { border-color: #F07840; }

button.weilo-popup__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 36px;
  border: 0;
  border-radius: 100px;
  background: var(--weilo-pp-text);
  color: var(--weilo-pp-bg);
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
button.weilo-popup__submit:hover,
button.weilo-popup__submit:focus-visible {
  background: var(--weilo-pp-yellow);
  color: var(--weilo-pp-text);
  outline: none;
}
button.weilo-popup__submit:disabled { opacity: 0.7; cursor: not-allowed; }

.weilo-popup__feedback {
  margin: 0;
  min-height: 22px;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--weilo-pp-text);
}
.weilo-popup__feedback.is-error   { color: #F07840; }
.weilo-popup__feedback.is-success { color: var(--weilo-pp-text); font-weight: 600; }

/* ---------- Decline link ---------- */
button.weilo-popup__decline {
  margin: 28px auto 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Absans", "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--weilo-pp-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
button.weilo-popup__decline:hover { text-decoration-thickness: 2px; }

/* ---------- Disclaimer ---------- */
.weilo-popup__disclaimer {
  margin: 24px auto 0;
  max-width: 460px;
  font-family: "Absans", "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--weilo-pp-text);
}
.weilo-popup__disclaimer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.weilo-popup__disclaimer a:hover { text-decoration: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) and (min-width: 769px) {
  .weilo-popup__copy { padding: 48px 40px; }
  .weilo-popup__title { font-size: 60px; }
}

/* ---------- Mobile — photo on top, copy below, single column ---------- */
@media (max-width: 768px) {
  .weilo-popup { padding: 12px; }
  .weilo-popup__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
    height: auto;
    max-height: calc(100dvh - 24px);
    border-radius: 24px;
  }
  .weilo-popup__copy { padding: 32px 20px 28px; }
  .weilo-popup__eyebrow { font-size: 14px; }
  .weilo-popup__title  { font-size: clamp(34px, 9vw, 48px); margin-bottom: 24px; }
  input.weilo-popup__input,
  button.weilo-popup__submit { height: 56px; font-size: 16px; }
  button.weilo-popup__decline { font-size: 17px; margin-top: 18px; }
  .weilo-popup__disclaimer { font-size: 11px; }
}