/**
 * Horizon Core - the SPLIT sign-up band (copy + form left, photo right) on a NON-commerce tenant
 *
 * HORIZON-20260930-034 (a creator's VIP sign-up with her photo alongside, as her old site had). Loaded only when
 * the tenant sets `email_signup_layout` = 'split' and is not a commerce store (hp_enqueue_email_signup_split_css() in
 * src/Commerce/storefront-styles.php). A commerce store already gets these exact rules from hp-commerce-sections.css.
 *
 * ⭐ COPIED VERBATIM from hp-commerce-sections.css (the split's own rules only), so the band renders exactly as it does
 * on the proven store. NOT copied: that file's collections, page-header and section-ground rules, which must not reach
 * a creator site. ⚠️ If the split changes there, change it here too (search: hp-email-signup-split).
 * Same load order as the original: wp_enqueue_scripts priority 20, after the shell's hp-components.css.
 *
 * @package Horizon\Core
 */

.hp-email-signup-split { display: grid; grid-template-columns: 1fr; align-items: center; padding: var(--hp-sp-16) 0; gap: var(--hp-sp-12); }
.hp-email-signup-split--has-image { grid-template-columns: 1fr 1fr; }
.hp-email-signup__left { display: flex; flex-direction: column; gap: var(--hp-sp-4); }
.hp-email-signup__headline { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.2; margin: 0; color: var(--hp-text); }
.hp-email-signup__body { color: var(--hp-text-muted); font-size: var(--hp-text-sm); line-height: 1.7; margin: 0; }
.hp-email-signup__form { margin-top: var(--hp-sp-2); }
.hp-email-signup__field-row { display: flex; height: 52px; }
.hp-email-signup__input { flex: 1; background: var(--hp-bg); border: 1px solid var(--hp-border-strong); border-right: none; border-radius: var(--hp-r-sm) 0 0 var(--hp-r-sm); color: var(--hp-text); font-family: var(--hp-font-body); font-size: var(--hp-text-sm); padding: 0 1rem; height: 100%; transition: border-color var(--hp-dur) var(--hp-ease); }
.hp-email-signup__input:focus { outline: none; border-color: var(--hp-text); }
.hp-email-signup__btn { flex-shrink: 0; padding: 0 var(--hp-sp-6); height: 100%; background: var(--hp-text); color: var(--hp-bg); border: 1px solid var(--hp-text); border-radius: 0 var(--hp-r-sm) var(--hp-r-sm) 0; font-family: var(--hp-font-body); font-size: var(--hp-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease); }
.hp-email-signup__btn:hover { background: var(--hp-gold); border-color: var(--hp-gold); color: var(--hp-on-accent); }
.hp-email-signup__privacy { font-size: var(--hp-text-xs); color: var(--hp-text-subtle); margin: 0; }
.hp-email-signup__right { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.hp-email-signup__right img { display: block; width: 100%; max-height: 420px; object-fit: cover; object-position: center top; border-radius: var(--hp-r-md); }
@media (max-width: 768px) {
  .hp-email-signup-split,
  .hp-email-signup-split--has-image { grid-template-columns: 1fr; padding: var(--hp-sp-10) 0; }
  .hp-email-signup__right { display: none; }
  .hp-email-signup__field-row { flex-direction: column; height: auto; gap: var(--hp-sp-3); }
  .hp-email-signup__input { border-right: 1px solid var(--hp-border-strong); border-radius: var(--hp-r-sm); height: 48px; }
  .hp-email-signup__btn { border-radius: var(--hp-r-sm); height: 48px; width: 100%; }
}
.hp-email-signup__form { flex-wrap: wrap; }
/* NOT lifted: the shell makes `.hp-email-signup__form` a flex row for its centred block; the theme's form is a plain
   block (only `flex-wrap` is set, and it does nothing on a block). Without this, the field row shrinks to its content. */
.hp-email-signup-split .hp-email-signup__form { display: block; }

/* HORIZON-20261001-013 (this file loads only for a NON-commerce tenant with `email_signup_layout` = 'split', today only
   one creator site, so none of this reaches a store). Two departures from the store's copy above, both from her review:
   1. No second band of padding: the section already pads 96px top and bottom, and the split's own 64px on top of that
      left ~160px of white above and below her sign-up.
   2. Her photo stays on the phone (her old site showed it), under the form and capped, instead of display:none, which
      left an empty band where the photo had been. */
.hp-email-section .hp-email-signup-split { padding: 0; }
@media (max-width: 768px) {
  .hp-email-section .hp-email-signup-split--has-image .hp-email-signup__right { display: flex; }
  .hp-email-section .hp-email-signup__right img { max-height: 360px; }
}

/* HORIZON-20261001-023 (her original design, 10-original-design-parity rows 7 and 8; this file still loads only for a
   non-commerce tenant with `email_signup_layout` = 'split', today one creator site):
   1. Her old fields: no box, a 2px rule in her ink under each, capitals in the placeholder; the button under the field
      at every width, full width, as hers was. (`!important` because the shell's form-field rule in hp-base.css sets
      border, background and padding with it; this selector is more specific.)
   2. Her old body line: capitals, tracked, in the display face.
   3. On a phone: 48px of section padding, not 96px (the band was ~280px taller than hers), and the words centred. */
.hp-email-section .hp-email-signup-split .hp-email-signup__field-row { flex-direction: column; height: auto; gap: var(--hp-sp-4); }
.hp .site-main .hp-email-signup-split .hp-email-signup__input {
  border: 0 !important;
  border-bottom: 2px solid var(--hp-text) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
  height: 48px;
}
.hp-email-signup-split .hp-email-signup__input::placeholder {
  font-family: var(--hp-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hp-text-muted);
  opacity: 1;
}
.hp-email-section .hp-email-signup-split .hp-email-signup__btn { width: 100%; height: 48px; border-radius: 0; font-family: var(--hp-btn-font, var(--hp-font-body)); }
.hp-email-section .hp-email-signup-split .hp-email-signup__body {
  font-family: var(--hp-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hp-text-muted);
}
@media (max-width: 768px) {
  .hp-email-section:has(.hp-email-signup-split) { padding: var(--hp-sp-12) 0; }
  .hp-email-section .hp-email-signup-split .hp-email-signup__headline,
  .hp-email-section .hp-email-signup-split .hp-email-signup__body { text-align: center; }
}