/* ==========================================================================
   TGL Hero — Home, 2026 redesign
   Requires: tgl-design-system.css (tokens) · tgl-fonts.css (@font-face)
   Design: 157:1341 (desktop 1920×905) · 354:12 (mobile)

   Todo se ancla en `.tgl-hero` — (0,2,0) — por lo mismo que el header: el kit
   de Elementor estila `a`, `button`, `input` y `p` como `.elementor-kit-6 <tag>`,
   que es (0,1,1) y le gana a un selector de clase suelto.
   ========================================================================== */

.tgl-hero {
    /* ── Component tokens ── */
    --hero-max: 1377px;
    --hero-min-h: 905px;              /* 157:1342 */
    --hero-min-h-mobile: 880px;       /* 354:12 */

    --hero-fg: var(--tgl-primitive-sand-100);
    --hero-eyebrow: rgba(242, 237, 227, 0.85);   /* 157:1346 */
    --hero-lead: rgba(242, 237, 227, 0.92);      /* 157:1350 */

    --hero-bar-bg: rgba(242, 237, 227, 0.96);    /* 157:1352 */
    --hero-bar-divider: #c9bfa8;                 /* 157:1363 */
    --hero-label: var(--tgl-primitive-stone-500);
    --hero-submit-bg: #36aebc;                   /* 157:1354 */
    --hero-submit-fg: #232122;

    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: var(--hero-min-h);
    color: var(--hero-fg);
    font-family: var(--tgl-font-body);
    overflow: hidden;
    isolation: isolate;
}

/* ── Media ────────────────────────────────────────────────────────────── */

.tgl-hero .tgl-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.tgl-hero .tgl-hero__image,
.tgl-hero .tgl-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

/* El video arranca invisible y aparece solo cuando REALMENTE se reproduce.
   Sin esto, un autoplay rechazado —iOS en bajo consumo es el caso común— deja
   un rectángulo negro tapando la imagen. */
.tgl-hero .tgl-hero__video {
    opacity: 0;
    transition: opacity var(--tgl-transition-slow);
}

.tgl-hero.is-video-playing .tgl-hero__video { opacity: 1; }

/* El degradado del diseño (157:1342): oscurece de abajo hacia arriba y se
   disuelve a la mitad. Es lo que hace legible el texto claro sobre una foto
   que puede ser clara o no. */
.tgl-hero .tgl-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(3, 28, 31, 0.334) 23.6%,
            rgba(19, 170, 188, 0) 50%
        );
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.tgl-hero .tgl-hero__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tgl-space-12);
    width: 100%;
    max-width: var(--hero-max);
    margin-inline: auto;
    padding: var(--tgl-space-12) var(--tgl-space-6) 4.5rem;
    box-sizing: border-box;
}

.tgl-hero .tgl-hero__content {
    display: flex;
    flex-direction: column;
    gap: 3rem;                        /* 48.045px — 157:1343 */
    min-width: 0;
    max-width: 1007px;
}

.tgl-hero .tgl-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 2.6667rem;                   /* 42.667px — 157:1345 */
}

/* ── Copy ─────────────────────────────────────────────────────────────── */

.tgl-hero .tgl-hero__eyebrow {
    margin: 0;
    font-family: var(--tgl-font-body);
    font-size: 1rem;                  /* 16px */
    font-weight: 700;
    letter-spacing: 0.2567em;         /* 4.1067 / 16 */
    line-height: 1.42;
    text-transform: uppercase;
    color: var(--hero-eyebrow);
}

.tgl-hero .tgl-hero__title {
    margin: 0;
    font-family: var(--tgl-font-heading);
    font-size: clamp(2.75rem, 5.2vw, 6.25rem);   /* hasta 100px — 157:1348 */
    font-weight: 600;
    line-height: 0.9;                 /* 90 / 100 */
    letter-spacing: -0.04em;
    color: var(--hero-fg);
    text-wrap: balance;
}

/* La itálica sale del Markdown inline del h1 ("*dream Bahamas vacation,*").
   Es la única razón por la que cargamos Raleway Italic. */
.tgl-hero .tgl-hero__title em {
    font-style: italic;
    font-weight: inherit;
}

.tgl-hero .tgl-hero__lead {
    margin: 0;
    max-width: 790px;                 /* 157:1350 */
    font-size: 1.5rem;                /* 24px */
    line-height: 1.1667;              /* 28 / 24 */
    color: var(--hero-lead);
}

/* ── Trip search ──────────────────────────────────────────────────────── */

.tgl-hero .tgl-hero__search {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr auto;
    gap: 0.5715rem;                   /* 9.15px */
    align-items: stretch;
    width: 100%;
    max-width: 1006.67px;
    padding: 0.8579rem;               /* 13.727px */
    background: var(--hero-bar-bg);
    border-radius: 1rem;              /* 16.015px */
    box-shadow: 0 27.455px 54.909px -13.727px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(7px);
    box-sizing: border-box;
}

.tgl-hero .tgl-hero__field {
    display: flex;
    flex-direction: column;
    gap: 0.2145rem;                   /* 3.432px */
    justify-content: center;
    min-width: 0;
    padding: 1rem 1.2869rem;          /* 16.015 / 20.591 */
    border-radius: 0.7149rem;
}

/* El divisor va entre campos, nunca antes del primero (157:1363). */
.tgl-hero .tgl-hero__field + .tgl-hero__field {
    border-left: 1px solid var(--hero-bar-divider);
}

.tgl-hero .tgl-hero__label {
    font-family: var(--tgl-font-display);
    font-size: 0.7149rem;             /* 11.439px */
    letter-spacing: 0.2em;            /* 2.2879 / 11.439 */
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--hero-label);
}

.tgl-hero .tgl-hero__control {
    display: flex;
    align-items: center;
    gap: var(--tgl-space-2);
    min-width: 0;
}

/* Los inputs se resetean a fondo: el kit de Elementor los pinta con borde,
   fondo y radio propios, y acá tienen que leerse como texto sobre la barra. */
.tgl-hero .tgl-hero__input {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    width: 100%;
    padding: 0;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--hero-label) !important;
    font-family: var(--tgl-font-body);
    /* 19.447px. En mobile sube a 16px — ver el media query: por debajo de eso
       iOS hace zoom al enfocar y descoloca todo el hero. */
    font-size: 1.2154rem;
    font-style: italic;
    line-height: 1.2;
}

.tgl-hero .tgl-hero__input:focus { outline: none; }

.tgl-hero .tgl-hero__input::placeholder {
    color: var(--hero-label);
    font-style: italic;
    opacity: 1;
}

.tgl-hero .tgl-hero__field--dates .tgl-hero__control { gap: var(--tgl-space-1); }

.tgl-hero .tgl-hero__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7149rem;
    padding: 1.857rem 1.8589rem;      /* 29.68 / 29.74 */
    background: var(--hero-submit-bg) !important;
    color: var(--hero-submit-fg) !important;
    border: 0 !important;
    border-radius: 0.7149rem !important;
    font-family: var(--tgl-font-body);
    font-size: 0.9509rem;             /* 15.214px */
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--tgl-transition-fast);
}

.tgl-hero .tgl-hero__submit:hover { filter: brightness(0.95); }

.tgl-hero .tgl-hero__submit-icon { width: 16px; height: 16px; }

/* ── Trust bar ────────────────────────────────────────────────────────── */

.tgl-hero .tgl-hero__trust {
    display: flex;
    flex-direction: column;
    gap: 13px;                        /* 304:2748 */
    flex: 0 0 491px;
    max-width: 491px;
}

.tgl-hero .tgl-hero__quote {
    margin: 0;
    padding: 0.428rem;                /* 6.848px */
    border-radius: 0.428rem;
    background: linear-gradient(
        72.79deg,
        rgba(15, 46, 53, 0.4) 0%,
        rgba(255, 255, 255, 0.14) 162.44%
    );
}

.tgl-hero .tgl-hero__quote blockquote {
    margin: 0;
    padding: var(--tgl-space-4) var(--tgl-space-3) var(--tgl-space-2);
    font-size: 1rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.4531;              /* 23.25 / 16 */
    color: rgba(255, 255, 255, 0.9);
}

.tgl-hero .tgl-hero__quote figcaption {
    padding: 0 var(--tgl-space-3) var(--tgl-space-3);
    font-family: var(--tgl-font-display);
    font-size: 0.8125rem;             /* 13px */
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

.tgl-hero .tgl-hero__rating {
    display: flex;
    align-items: center;
    gap: var(--tgl-space-3);
    margin: 0;
    font-family: var(--tgl-font-display);
    font-size: 0.875rem;              /* 14px */
    line-height: 1.55;
    color: var(--tgl-primitive-white);
}

.tgl-hero .tgl-hero__stars {
    color: #f5834a;                   /* 295:88 */
    letter-spacing: 0.143em;
}

.tgl-hero .tgl-hero__press {
    margin: 0;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4531;
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Mobile — 80% del tráfico
   ========================================================================== */

@media (max-width: 1023px) {

    .tgl-hero {
        min-height: var(--hero-min-h-mobile);
    }

    .tgl-hero .tgl-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tgl-space-8);
        padding: var(--tgl-space-10) var(--tgl-space-5) var(--tgl-space-8);
    }

    .tgl-hero .tgl-hero__content { gap: var(--tgl-space-8); }
    .tgl-hero .tgl-hero__copy { gap: var(--tgl-space-5); }

    .tgl-hero .tgl-hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; }
    .tgl-hero .tgl-hero__lead { font-size: 1rem; line-height: 1.5; }

    /* Los cuatro campos apilados. La grilla de una fila necesita ~1006px para
       no aplastar los labels; abajo de eso, una columna se lee mejor que
       cuatro celdas de 80px. */
    .tgl-hero .tgl-hero__search {
        grid-template-columns: 1fr;
        gap: 0;
        padding: var(--tgl-space-2);
    }

    .tgl-hero .tgl-hero__field { padding: var(--tgl-space-3) var(--tgl-space-4); }

    /* En columna el divisor va arriba, no a la izquierda. */
    .tgl-hero .tgl-hero__field + .tgl-hero__field {
        border-left: 0;
        border-top: 1px solid var(--hero-bar-divider);
    }

    /* 16px es el piso: por debajo, iOS hace zoom al enfocar el campo y deja el
       hero descolocado y al usuario perdido. */
    .tgl-hero .tgl-hero__input { font-size: 1rem; }

    .tgl-hero .tgl-hero__submit {
        margin-top: var(--tgl-space-2);
        padding-block: var(--tgl-space-4);
        width: 100%;
    }

    /* En mobile la barra de confianza deja de ser un overlay y pasa a ser la
       banda de abajo (354:36). Mismo markup, otro layout. */
    .tgl-hero .tgl-hero__trust {
        flex: none;
        max-width: none;
        align-items: center;
        text-align: center;
        gap: var(--tgl-space-2);
    }

    /* La cita es lo primero que sobra en 390px: el rating y la prensa dicen lo
       mismo en dos líneas en vez de en seis. */
    .tgl-hero .tgl-hero__quote { display: none; }

    .tgl-hero .tgl-hero__rating { justify-content: center; font-size: 0.8125rem; }
    .tgl-hero .tgl-hero__press { font-size: 0.75rem; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
    .tgl-hero .tgl-hero__video { transition: none; }
}