/* =============================================================================
   Blog archive — dynasty/assets/css/blog.css
   Carga sólo en la página con Template Name: Blog.

   Estructura:
     1) Hero     — featured post: fullbleed bg + pill + H1 + subtitle + CTA gold
     2) Archive  — tabs categorías + grid 3×3 + Load more
     3) CTA      — banner global (reusa homepage)
     4) Places   — Top places (reusa cities)
     5) Explore  — tabs underline + featured big + lista 4 small
   ============================================================================ */

.dynasty-page-blog { padding: 0; }


/* =============================================================================
   1) HERO FEATURED — pill + H1 + subtitle + CTA, todo centrado sobre bg image
   ============================================================================ */

.dynasty-blog-hero {
    position: relative;
    min-height: clamp(520px, 80vh, 760px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--dynasty-white, #FFFFFF);
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Overlay sutil para legibilidad. Más fuerte abajo donde está el botón. */
.dynasty-blog-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

.dynasty-blog-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-block: clamp(60px, 10vw, 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Pill "Blog" — override del estilo global gris a blanco para resaltar sobre la imagen. */
.dynasty-blog-hero__pill {
    margin: 0 !important;
    background: var(--dynasty-white, #FFFFFF) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

.dynasty-blog-hero__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 3.6vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--dynasty-white, #FFFFFF) !important;
    margin: 0 !important;
    max-width: 1100px;
}

.dynasty-blog-hero__subtitle {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 400;
    color: var(--dynasty-white, #FFFFFF);
    margin: 0 0 8px;
    opacity: 0.95;
}

/* Botón "Read now" — gold solid con flip de color en hover. */
.dynasty-blog-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 38px;
    background: var(--dynasty-brand-gold, #D4AF37);
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
}
.dynasty-blog-hero__cta:hover {
    background: var(--dynasty-black-obsidian, #0A0A0A);
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}


/* =============================================================================
   2) ARCHIVE — tabs categorías + grid 3×3 + Load more
   ============================================================================ */

.dynasty-blog-archive {
    padding: clamp(50px, 7vw, 90px) 0;
    background: var(--dynasty-white, #FFFFFF);
}

/* -----------------------------------------------------------------------------
   Grid 3×3 — usa .dynasty-blog-archive-card (helper PHP)
   ----------------------------------------------------------------------------- */

.dynasty-blog-archive__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start; /* cada card crece sola en hover, sin estirar la fila */
}
@media (min-width: 640px) {
    .dynasty-blog-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}
@media (min-width: 992px) {
    .dynasty-blog-archive__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* Card individual */
.dynasty-blog-archive-card {
    background: var(--dynasty-white, #FFFFFF);
    border: 1px solid #EAEAEA;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dynasty-blog-archive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.dynasty-blog-archive-card__media-link {
    display: block;
    overflow: hidden;
    background: #f0f0f0;
    aspect-ratio: 16 / 10;
}
.dynasty-blog-archive-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.dynasty-blog-archive-card:hover .dynasty-blog-archive-card__img {
    transform: scale(1.04);
}

.dynasty-blog-archive-card__body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Categorías (pills cuadrados gris claro) */
.dynasty-blog-archive-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.dynasty-blog-archive-card__cat {
    display: inline-block;
    padding: 4px 10px;
    background: #F1F1F1;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background 0.18s ease;
}
.dynasty-blog-archive-card__cat:hover {
    background: var(--dynasty-brand-gold, #D4AF37);
}
/* Hover de toda la card → todas las pills en dorado. */
.dynasty-blog-archive-card:hover .dynasty-blog-archive-card__cat {
    background: var(--dynasty-brand-gold, #D4AF37);
}

/* Título */
.dynasty-blog-archive-card__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: clamp(17px, 1.5vw, 19px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 !important;
}
.dynasty-blog-archive-card__title a {
    color: inherit;
    text-decoration: none !important;
    transition: color 0.18s ease;
}
.dynasty-blog-archive-card__title a:hover {
    color: var(--dynasty-brand-gold, #D4AF37);
}

/* Excerpt — oculto, se revela en hover. */
.dynasty-blog-archive-card__excerpt {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--dynasty-gray-brand, #6D6E70);
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.4s ease;
}
.dynasty-blog-archive-card:hover .dynasty-blog-archive-card__excerpt,
.dynasty-blog-archive-card:focus-within .dynasty-blog-archive-card__excerpt {
    max-height: 160px;
    opacity: 1;
}

/* "View Post" — oculto, se revela en hover (link subrayado al fondo). */
.dynasty-blog-archive-card__viewpost {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    align-self: flex-start;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.35s ease, color 0.18s ease;
}
.dynasty-blog-archive-card:hover .dynasty-blog-archive-card__viewpost,
.dynasty-blog-archive-card:focus-within .dynasty-blog-archive-card__viewpost {
    max-height: 40px;
    opacity: 1;
}
.dynasty-blog-archive-card__viewpost:hover {
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}

/* Footer: avatar + autor (izq) y fecha (der) */
.dynasty-blog-archive-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #F0F0F0;
}
.dynasty-blog-archive-card__author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Logo Dynasty horizontal (no círculo) — el logo nuevo es ancho. */
.dynasty-blog-archive-card__avatar {
    height: 20px;
    width: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.dynasty-blog-archive-card__avatar img {
    height: 20px;
    width: auto;
    object-fit: contain;
}
.dynasty-blog-archive-card__by {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--dynasty-black-obsidian, #0A0A0A);
}
.dynasty-blog-archive-card__date {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: var(--dynasty-gray-brand, #6D6E70);
}

/* -----------------------------------------------------------------------------
   Load more
   ----------------------------------------------------------------------------- */

.dynasty-blog-archive__more {
    margin-top: clamp(36px, 5vw, 56px);
    display: flex;
    justify-content: center;
}
.dynasty-blog-archive__more .dynasty-btn {
    padding: 16px 40px;
    font-size: 13px;
    letter-spacing: 0.2em;
}

.dynasty-blog-archive__empty {
    text-align: center;
    padding: 48px 24px;
    background: #F7F7F7;
    color: var(--dynasty-gray-brand, #6D6E70);
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 15px;
    border-radius: 4px;
    margin: 0;
}


/* =============================================================================
   3) CTA BANNER CENTRADO — entre grid y Top places (Big-Post.jpg)
   Markup distinto al CTA del homepage: contenido centrado, overlay uniforme,
   pill arriba, sin brands line, sin flecha.
   ============================================================================ */

.dynasty-cta-centered {
    position: relative;
    min-height: clamp(420px, 55vh, 600px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--dynasty-white, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Overlay uniforme oscuro (sin gradient direccional). */
.dynasty-cta-centered__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.dynasty-cta-centered__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-block: clamp(60px, 8vw, 110px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 880px;
}

/* Pill "New arrival" — override del .dynasty-page-pill global: gris oscuro translúcido + texto blanco. */
.dynasty-cta-centered__pill {
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: var(--dynasty-white, #FFFFFF) !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 0.12em;
    padding: 8px 18px !important;
}

.dynasty-cta-centered__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 4vw, 44px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.005em;
    color: var(--dynasty-white, #FFFFFF) !important;
    margin: 0 !important;
    text-transform: none;
}

.dynasty-cta-centered__lead {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 400;
    line-height: 1.55;
    color: var(--dynasty-white, #FFFFFF);
    margin: 0 0 16px;
    opacity: 0.95;
    max-width: 720px;
}

/* Botón gold solid sin flecha. */
.dynasty-cta-centered__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    background: var(--dynasty-brand-gold, #D4AF37);
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none !important;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
.dynasty-cta-centered__btn:hover {
    background: var(--dynasty-black-obsidian, #0A0A0A);
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}


/* =============================================================================
   4) TOP PLACES — bloque cities (markup heredado de homepage.css)
   ============================================================================ */

.dynasty-blog-places {
    padding-top: clamp(60px, 8vw, 100px) !important;
    padding-bottom: clamp(60px, 8vw, 100px) !important;
}


/* =============================================================================
   5) EXPLORE BY CATEGORY — tabs underline + featured big + lista 4 small
   ============================================================================ */

.dynasty-blog-explore {
    padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 9vw, 110px);
    background: var(--dynasty-white, #FFFFFF);
}

/* Tabs underline */
.dynasty-blog-explore__tabs {
    display: flex;
    gap: clamp(20px, 3vw, 40px);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: clamp(24px, 3vw, 40px);
    border-bottom: 1px solid #E5E5E5;
}
.dynasty-blog-explore__tab {
    display: inline-block;
    padding: 14px 2px;
    color: var(--dynasty-gray-brand, #6D6E70) !important;
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    position: relative;
    transition: color 0.18s ease;
    white-space: nowrap;
}
.dynasty-blog-explore__tab:hover {
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}
.dynasty-blog-explore__tab.is-active {
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    font-weight: 700;
}
.dynasty-blog-explore__tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--dynasty-black-obsidian, #0A0A0A);
}

/* Box contenedor: borde + padding */
.dynasty-blog-explore__box {
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    padding: clamp(20px, 3vw, 36px);
}

/* Grid 2 columnas: featured izq | lista der */
.dynasty-blog-explore__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 992px) {
    .dynasty-blog-explore__grid {
        grid-template-columns: 1.15fr 1fr;
        gap: clamp(32px, 4vw, 56px);
    }
}

/* -----------------------------------------------------------------------------
   Featured big (izq)
   ----------------------------------------------------------------------------- */

.dynasty-blog-explore__featured {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.dynasty-blog-explore__featured-media {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
}
.dynasty-blog-explore__featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.dynasty-blog-explore__featured-media:hover img {
    transform: scale(1.03);
}

.dynasty-blog-explore__featured-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 4px 0;
}
.dynasty-blog-explore__featured-time {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--dynasty-gray-brand, #6D6E70);
    letter-spacing: 0.02em;
}
.dynasty-blog-explore__featured-title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: clamp(18px, 1.8vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 !important;
}
.dynasty-blog-explore__featured-title a {
    color: inherit;
    text-decoration: none !important;
}
.dynasty-blog-explore__featured-title a:hover {
    color: var(--dynasty-brand-gold, #D4AF37);
}
.dynasty-blog-explore__featured-excerpt {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--dynasty-gray-brand, #6D6E70);
    margin: 0;
}
.dynasty-blog-explore__featured-link {
    display: inline-block;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    align-self: flex-start;
    transition: color 0.18s ease;
}
.dynasty-blog-explore__featured-link:hover {
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}

/* -----------------------------------------------------------------------------
   Lista 4 items (der)
   ----------------------------------------------------------------------------- */

.dynasty-blog-explore__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.dynasty-blog-explore__list-item { margin: 0; }
.dynasty-blog-explore__list-link {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: center;
    text-decoration: none !important;
    transition: opacity 0.18s ease;
}
.dynasty-blog-explore__list-link:hover { opacity: 0.85; }
.dynasty-blog-explore__list-thumb {
    display: block;
    width: 110px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}
.dynasty-blog-explore__list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dynasty-blog-explore__list-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.dynasty-blog-explore__list-title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dynasty-black-obsidian, #0A0A0A);
    /* clamp a 2 líneas para evitar que se desborde */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dynasty-blog-explore__list-date {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--dynasty-gray-brand, #6D6E70);
}

@media (max-width: 480px) {
    .dynasty-blog-explore__list-link {
        grid-template-columns: 80px 1fr;
        gap: 12px;
    }
    .dynasty-blog-explore__list-thumb {
        width: 80px;
        height: 60px;
    }
}