/*------------------------------------------------------------------
  Patagonia Tours – Frontend Styles (v1.2)

  Filosofía: los widgets renderizan SIN opinión sobre fondos, paddings
  o max-widths. Esos los controla el contenedor de Elementor donde
  está el widget. Aquí solo hay layout estructural intrínseco
  (flex/grid de cada sección) y estilos del contenido.
-------------------------------------------------------------------*/

.pt-section { width: 100%; box-sizing: border-box; }
.pt-section img { max-width: 100%; display: block; height: auto; }
.pt-section * { box-sizing: border-box; }

/* Full-bleed opcional: rompe contenedores anidados que limiten ancho. */
.pt-fullbleed {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* ------------------------------------------------------------------
   Section 1 – Hero
   Layout flex column con 2 hijos: __inner (place + título) y opcional
   __bottom (flecha + redes). justify-content controla la posición
   vertical (default flex-end = abajo, como antes).
------------------------------------------------------------------ */
.pt-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
.pt-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
    opacity: .35;
    pointer-events: none;
}
.pt-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
    padding: 1.5rem;
}
.pt-hero__place {
    display: inline-block;
    font-size: .9rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.pt-hero__title {
    font-size: clamp(2rem, 6vw, 4.5rem);
    line-height: 1.05;
    margin: 0;
    font-weight: 700;
    text-shadow: 0 2px 20px rgba(0,0,0,.25);
}

/* Bottom block — scroll arrow + social icons */
.pt-hero__bottom {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    color: #fff;
}
.pt-hero__scroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    line-height: 0;
}
.pt-hero__scroll svg {
    width: 32px;
    height: 32px;
    display: block;
}
.pt-hero__scroll--bounce {
    animation: pt-hero-bounce 1.8s ease-in-out infinite;
}
@keyframes pt-hero-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}
.pt-hero__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.25rem;
}
.pt-hero__social-item { line-height: 0; }
.pt-hero__social a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease, transform .2s ease;
}
.pt-hero__social a:hover { opacity: .8; transform: translateY(-1px); }
.pt-hero__social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}
.pt-hero__social i {
    font-size: 18px;
    line-height: 1;
}

/* ------------------------------------------------------------------
   Section 2 – Intro + Botón
------------------------------------------------------------------ */
.pt-intro__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .pt-intro__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}
.pt-intro__title { margin: 0 0 .5rem; }
.pt-intro__desc  { margin: 0; }
.pt-intro__btn   { flex-shrink: 0; align-self: flex-start; }
.pt-btn {
    display: inline-block;
    padding: .85rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: opacity .2s ease, transform .2s ease;
    cursor: pointer;
}
.pt-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ------------------------------------------------------------------
   Section 3 / 7 – Feature image
------------------------------------------------------------------ */
.pt-feature-image { width: 100%; }
.pt-feature-image img { width: 100%; display: block; }

/* ------------------------------------------------------------------
   Section 4 – Description
------------------------------------------------------------------ */
.pt-description__inner {
    margin: 0 auto; /* respeta max-width del control de Elementor si lo define */
}
.pt-description__inner p { margin: 0 0 1rem; }

/* ------------------------------------------------------------------
   Section 5 – Gallery
   En el widget Elementor las columnas se controlan por breakpoint vía
   selectors. Aquí solo damos el default (1 col) + clases de fallback
   `.pt-gallery--cols-N` que usa el shortcode/template (no responsive).
------------------------------------------------------------------ */
.pt-gallery {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
.pt-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pt-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pt-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }
.pt-gallery__item   { display: block; }
.pt-gallery__item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform .35s ease;
}
.pt-gallery__item:hover img { transform: scale(1.02); }

/* ------------------------------------------------------------------
   Section 6 – Highlights (sin BG ni padding por defecto)
------------------------------------------------------------------ */
.pt-highlights__inner { text-align: center; }
.pt-highlights__heading { margin: 0 0 1.5rem; }
.pt-highlights__list { list-style: none; margin: 0; padding: 0; }
.pt-highlight + .pt-highlight { margin-top: 1.5rem; }
.pt-highlight__title { margin: 0 0 .35rem; }
.pt-highlight__desc  { margin: 0; }

/* ------------------------------------------------------------------
   Section 8 – Image + Text
------------------------------------------------------------------ */
.pt-image-text__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 800px) {
    .pt-image-text__inner { flex-direction: row; align-items: center; }
    .pt-image-text--reverse .pt-image-text__inner { flex-direction: row-reverse; }
}
.pt-image-text__media { flex: 0 0 45%; }
.pt-image-text__media img { width: 100%; height: auto; }
.pt-image-text__copy  { flex: 1; }
.pt-image-text__copy p { margin: 0 0 1rem; }

/* ------------------------------------------------------------------
   Section 9 – Other tours
------------------------------------------------------------------ */
.pt-other-tours__heading { text-align: center; margin: 0 0 1.5rem; }
.pt-other-tours__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) { .pt-other-tours__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pt-other-tours__grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------
   Tour Card — base (compartido por estilo Clásico y Overlay)
   El BG, padding, radio y sombra los pone el widget de Elementor.
------------------------------------------------------------------ */
.pt-tour-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
    /* min-w fix para grid: */
    min-width: 0;
}
.pt-tour-card:hover { transform: translateY(-4px); }
.pt-tour-card__media {
    width: 100%;
    background: #ddd center/cover no-repeat;
    overflow: hidden;
}
.pt-tour-card__body { margin-top: .85rem; }
.pt-tour-card__place {
    display: inline-block;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .25rem;
    opacity: .65;
}
.pt-tour-card__title   { margin: 0 0 .5rem; }
.pt-tour-card__excerpt { margin: 0; opacity: .8; }

/* Estilo Clásico — imagen con altura fija arriba, texto abajo */
.pt-tour-card--classic .pt-tour-card__media { height: 220px; }

/* Estilo Overlay — título sobre la imagen, proporción configurable.
   Usamos el hack padding-top (en lugar de aspect-ratio) porque es a prueba
   de balas en todos los contextos: flex, grid, links inline, mobile, etc.
   La proporción se controla con la variable --pt-card-aspect
   (porcentaje del padding-top). Si el widget setea una `height` fija, el
   selector de Elementor también pone `padding-top: 0` y la height manda. */
.pt-tour-card--overlay {
    position: relative;
}
.pt-tour-card--overlay .pt-tour-card__media {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: var(--pt-card-aspect, 125%); /* 125% = 4:5 default */
    overflow: hidden;
}
.pt-tour-card--overlay .pt-tour-card__gradient,
.pt-tour-card--overlay .pt-tour-card__overlay {
    position: absolute;
    inset: 0;
}
.pt-tour-card--overlay .pt-tour-card__gradient {
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
    border-radius: inherit;
}
.pt-tour-card--overlay .pt-tour-card__overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1.5rem;
    color: #fff;
}
.pt-tour-card--overlay .pt-tour-card__place {
    color: #fff;
    opacity: 1;
}
.pt-tour-card--overlay .pt-tour-card__title {
    color: #fff;
    margin: 0;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* ------------------------------------------------------------------
   Listing wrapper (shortcode + listing widget)
------------------------------------------------------------------ */
.pt-tours-list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .pt-tours-list.pt-cols-2,
    .pt-tours-list.pt-cols-3,
    .pt-tours-list.pt-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .pt-tours-list.pt-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .pt-tours-list.pt-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.pt-tours-list.pt-empty {
    display: block;
    padding: 1.5rem;
    text-align: center;
    opacity: .65;
}

/* ------------------------------------------------------------------
   Promo / CTA card — fills empty grid slots at end of listing
------------------------------------------------------------------ */
.pt-promo-card {
    display: flex;
    background: #0e2a3f;
    color: #fff;
    padding: 2rem;
    border-radius: 12px;
    min-width: 0;
    box-sizing: border-box;
}
/* El inner se estira a 100% del alto de la card (gracias a align-self: stretch
   por default en flex) y centra verticalmente su propio contenido. Así, cuando
   la card es más alta que el contenido (porque el grid la estira al alto del
   tour más alto de la fila), el texto y botón quedan en el centro vertical. */
.pt-promo-card__inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
}
.pt-promo-card__question {
    margin: 0;
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    line-height: 1.3;
    font-style: italic;
    font-weight: 400;
}
.pt-promo-card__message {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 600;
}
.pt-promo-card__btn {
    display: inline-block;
    padding: 14px 24px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 0;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pt-promo-card__btn:hover {
    background: rgba(255,255,255,.1);
    transform: translateY(-1px);
}
/* On very small screens, force the promo to span the whole row regardless
   of the inline span="N" set for desktop. */
@media (max-width: 599px) {
    .pt-promo-card { grid-column: 1 / -1 !important; }
}

.pt-elementor-empty {
    padding: 1rem;
    border: 1px dashed #ccc;
    text-align: center;
    font-style: italic;
    opacity: .75;
}

/* ------------------------------------------------------------------
   Section Video — embed responsivo (oEmbed o MP4 directo)
------------------------------------------------------------------ */
.pt-video__inner { width: 100%; }
.pt-video__frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.pt-video--16-9 .pt-video__frame { aspect-ratio: 16 / 9; }
.pt-video--21-9 .pt-video__frame { aspect-ratio: 21 / 9; }
.pt-video--4-3  .pt-video__frame { aspect-ratio: 4 / 3; }
.pt-video--1-1  .pt-video__frame { aspect-ratio: 1 / 1; }
.pt-video__frame > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.pt-video__embed iframe,
.pt-video__embed object,
.pt-video__embed embed {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.pt-video__player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pt-video__embed--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #111;
    padding: 1rem;
    text-align: center;
}
.pt-video__caption {
    margin-top: .75rem;
    text-align: center;
    opacity: .8;
    font-size: .9rem;
}

/* ------------------------------------------------------------------
   Lightbox para galería (mínimo, sin dependencias)
------------------------------------------------------------------ */
.pt-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 1rem;
    cursor: zoom-out;
}
.pt-lightbox.is-open { display: flex; }
.pt-lightbox img { max-width: 95vw; max-height: 95vh; }