/* ─── Panamar — História page ───────────────────────────────────────── */

body.panamar-historia {
    background: #eeeeee;
    margin: 0;
    color: #161616;
    font-family: 'Jost', system-ui, -apple-system, sans-serif;
}

/* ─── HERO ────────────────────────────────────────────────────────── */
.historia-hero {
    position: relative;
    width: 100%;
    height: clamp(280px, 32vw, 420px);
    /* Sem overflow:hidden — o header vive dentro deste hero e o dropdown do menu
       estende-se para baixo; overflow:hidden cortava-o no fim do banner. A imagem
       de fundo é object-fit:cover com inset:0, por isso não transborda na mesma. */
    background: #1a1a1a;
}
.historia-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.historia-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%),
        linear-gradient(rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
/* Header sits transparent over the hero — light variant already provides white type */
body.panamar-historia .panamar-header {
    background: transparent !important;
    border-bottom: 0 !important;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
}
.historia-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 0;
    text-align: center;
}
.historia-hero__eyebrow {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin: 0 0 12px;
}
.historia-hero__title {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 36px);
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.2px;
}

/* ─── BODY (editorial blocks) ───────────────────────────────────── */
.historia-body {
    padding: 56px 24px 56px;
    background: #eeeeee;
}
.historia-body__inner {
    max-width: 1024px;
    margin: 0 auto;
    color: #161616;
    font-family: 'Jost', system-ui, sans-serif;
}

/* Intro — Spectral 22, max 780px */
.historia-body__intro-title {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.15;
    color: #161616;
    max-width: 820px;
    margin: 0 0 22px;
}
.historia-body__intro {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.7;
    color: #161616;
    max-width: 780px;
    margin: 0 0 40px;
}
.historia-body__rule {
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 0 0 40px;
}

/* Two-column grid (used twice: top text + origins section) */
.historia-body__cols {
    display: grid;
    gap: 48px;
    margin-bottom: 56px;
}
@media (min-width: 900px) {
    .historia-body__cols { grid-template-columns: 1fr 1fr; }
}
.historia-body__col p {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #333333;
    line-height: 1.85;
    margin: 0 0 20px;
}
.historia-body__col p:last-child { margin-bottom: 0; }

/* Section heading */
.historia-body__section { margin-bottom: 56px; }
.historia-body__section .historia-body__cols { margin-bottom: 0; }
.historia-body__h2 {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(22px, 2.8vw, 26px);
    color: #161616;
    margin: 0 0 24px;
    letter-spacing: 0.2px;
}

/* Full-width image block */
.historia-body__bigimg {
    border-radius: 8px;
    overflow: hidden;
    height: clamp(280px, 40vw, 520px);
    margin-bottom: 56px;
}
.historia-body__bigimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Quote block — beige bg, amber left border, Spectral italic */
.historia-body__quote {
    background: #f7f4f0;
    border-left: 3px solid #c8b89a;
    border-radius: 8px;
    padding: 40px;
    margin: 0 0 56px;
    font-family: 'Spectral', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.9vw, 20px);
    line-height: 1.75;
    color: #161616;
}

/* Image + text split (50/50) */
.historia-body__split {
    display: grid;
    gap: 40px;
    align-items: center;
    margin-bottom: 0;
}
@media (min-width: 900px) {
    .historia-body__split { grid-template-columns: 1fr 1fr; }
}
.historia-body__split-img {
    border-radius: 8px;
    overflow: hidden;
    height: clamp(240px, 36vw, 440px);
}
.historia-body__split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.historia-body__split-text p {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #333333;
    line-height: 1.85;
    margin: 0 0 20px;
}
.historia-body__split-text p:last-of-type { margin-bottom: 32px; }
.historia-body__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #161616;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: opacity 0.2s ease;
}
.historia-body__more:hover,
.historia-body__more:focus {
    opacity: 0.6;
    color: #161616;
}

/* ─── GALLERY (dark strip) ───────────────────────────────────────── */
.historia-galeria {
    background: #1a1a1a;
    padding: 80px 0 90px;
    color: #ffffff;
}
.historia-galeria__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 40px;
    margin-bottom: 40px;
}
.historia-galeria__eyebrow {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 0 0 8px;
}
.historia-galeria__title {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(24px, 2.8vw, 30px);
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.2px;
}
.historia-galeria__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.historia-galeria__arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #ffffff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.historia-galeria__arrow:hover { background: rgba(255,255,255,0.1); }
.historia-galeria__arrow:disabled { opacity: 0.25; cursor: default; }

/* Strip — translateX drives horizontal pagination */
.historia-galeria__viewport {
    padding: 0 40px;
    overflow: hidden;
}
.historia-galeria__strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 24px) / 3); /* 3 visible, 12px gap × 2 */
    gap: 12px;
    transition: transform 0.5s ease;
}

.historia-galeria__item {
    position: relative;
    padding: 0;
    border: 0;
    background: #2a2a2a;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px;
}
.historia-galeria__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.historia-galeria__item:hover .historia-galeria__img { transform: scale(1.05); }

.historia-galeria__item-shade {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}
.historia-galeria__item:hover .historia-galeria__item-shade { background: rgba(0,0,0,0.1); }

.historia-galeria__item-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.historia-galeria__item:hover .historia-galeria__item-zoom { opacity: 1; }
.historia-galeria__item-zoom svg {
    width: 40px;
    height: 40px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.historia-galeria__caption {
    /* Nomes das fotos ocultos a pedido (títulos auto "Panamar History Image N").
       Para voltar a mostrar legendas reais, remover este display:none. */
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 16px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
    color: rgba(255,255,255,0.85);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 300;
    text-align: left;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.historia-galeria__item:hover .historia-galeria__caption { transform: translateY(0); }

/* Dot indicators below strip */
.historia-galeria__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}
.historia-galeria__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.historia-galeria__dot.is-active {
    width: 20px;
    background: #ffffff;
}

/* ─── LIGHTBOX ──────────────────────────────────────────────────── */
.historia-lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
}
.historia-lightbox.is-open { display: flex; }
html.historia-lb-active,
html.historia-lb-active body { overflow: hidden; }

.historia-lightbox__shade {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    cursor: pointer;
}

.historia-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.historia-lightbox__close:hover { color: #ffffff; }

.historia-lightbox__counter {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255,255,255,0.55);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    margin: 0;
}

/* Setas dentro da figure, junto à imagem (estilo protótipo): círculo 40px,
   borda ténue, fundo transparente. Por defeito ficam ligeiramente dentro das
   bordas da imagem; em ecrãs largos passam para fora (ver min-width abaixo). */
.historia-lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #ffffff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.historia-lightbox__arrow:hover { background: rgba(255,255,255,0.1); }
.historia-lightbox__arrow--prev { left: 8px; }
.historia-lightbox__arrow--next { right: 8px; }
@media (min-width: 1180px) {
    .historia-lightbox__arrow--prev { left: -60px; }
    .historia-lightbox__arrow--next { right: -60px; }
}

.historia-lightbox__figure {
    position: relative;
    z-index: 5;
    margin: 0;
    max-width: min(90vw, 1000px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.historia-lightbox__img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    display: block;
}
.historia-lightbox__caption {
    margin-top: 16px;
    color: rgba(255,255,255,0.8);
    font-family: 'Spectral', Georgia, serif;
    font-style: italic;
    font-size: 14px;
    text-align: center;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .historia-galeria__head { padding: 0 24px; flex-direction: column; align-items: flex-start; }
    .historia-galeria__viewport { padding: 0 24px; }
    .historia-galeria__strip { grid-auto-columns: calc((100% - 12px) / 2); }
    .historia-galeria__caption { transform: translateY(0); }
    .historia-galeria__item-zoom { opacity: 0.7; }
}
@media (max-width: 600px) {
    .historia-hero { height: clamp(220px, 50vw, 320px); }
    .historia-body { padding: 60px 22px 70px; }
    .historia-galeria { padding: 60px 0 70px; }
    .historia-galeria__strip { grid-auto-columns: 100%; }
}