/* =============================================================================
   About page — dynasty/assets/css/about.css
   Carga sólo en la página con Template Name: About.

   Estructura:
     1) Hero    — 3 cols: imágenes izq | copy centro | imágenes der
     2) Story   — imagen izq + título + texto (How it all began)
     3) Values  — 4 cards (Excellence / Transparency / Safety / Experience)
     4) Bottom  — 3 cards full-bleed con bg image + label overlay
     5) CTA     — banner global (reusa homepage)
   ============================================================================ */

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


/* =============================================================================
   1) HERO — 3 cols (imágenes izq | copy centro | imágenes der)
   ============================================================================ */

.dynasty-about-hero {
    padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 80px);
    background: var(--dynasty-white, #FFFFFF);
}

.dynasty-about-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}
@media (min-width: 992px) {
    .dynasty-about-hero__inner {
        /* 1 col imagen izq | 1.4fr copy | 1 col imagen der */
        grid-template-columns: 1fr 1.4fr 1fr;
        gap: clamp(28px, 3vw, 48px);
    }
}

/* Columnas de imágenes (izq + der) */
.dynasty-about-hero__col {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 18px);
}
.dynasty-about-hero__col img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Primera imagen de cada columna: se "revela" desde blanco (fade-in arriba).
   Última imagen: se "disuelve" hacia blanco (fade-out abajo). Usa mask en vez
   de un overlay blanco sólido para que se funda con el bg blanco de la
   sección sin importar el color de fondo real de la imagen. */
.dynasty-about-hero__col img:first-child {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 35%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 35%);
}
.dynasty-about-hero__col img:last-child {
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

/* En mobile (1 col), los stacks de imágenes pasan a 3 columnas en línea para
   no ocupar tanto espacio vertical. */
@media (max-width: 991px) {
    .dynasty-about-hero__col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .dynasty-about-hero__col img {
        aspect-ratio: 1 / 1;
    }
}

/* Copy (columna central) */
.dynasty-about-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
}
@media (min-width: 992px) {
    .dynasty-about-hero__copy {
        align-items: center;
        text-align: center;
    }
}

.dynasty-about-hero__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: 700 !important;
    font-size: clamp(26px, 3.6vw, 42px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.005em;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 !important;
    text-transform: none;
    max-width: 520px;
}

.dynasty-about-hero__lead {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--dynasty-gray-brand, #6D6E70);
    margin: 0;
    max-width: 480px;
}

.dynasty-about-hero__cta {
    padding: 14px 32px;
    font-size: 13px;
    letter-spacing: 0.2em;
}


/* =============================================================================
   2) STORY — imagen izq + copy der ("How it all began")
   ============================================================================ */

.dynasty-about-story {
    padding: clamp(50px, 7vw, 90px) 0;
    background: #F9F9F9;
}

.dynasty-about-story__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}
@media (min-width: 768px) {
    .dynasty-about-story__inner {
        grid-template-columns: 1fr 1.1fr;
        gap: clamp(40px, 5vw, 64px);
    }
}

.dynasty-about-story__media {
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
}
.dynasty-about-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dynasty-about-story__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 3.4vw, 38px) !important;
    line-height: 1.18 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 0 20px !important;
    text-transform: none;
}

.dynasty-about-story__body {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--dynasty-gray-brand, #6D6E70);
}
.dynasty-about-story__body p {
    margin: 0 0 1em;
}
.dynasty-about-story__body p:last-child { margin-bottom: 0; }

.dynasty-about-story__cta {
    margin-top: 28px;
}


/* =============================================================================
   3) VALUES — 4 cards (Excellence / Transparency / Safety / Experience)
   ============================================================================ */

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

.dynasty-about-values__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .dynasty-about-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .dynasty-about-values__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

.dynasty-about-value {
    background: var(--dynasty-white, #FFFFFF);
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 24px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin: 0 !important;
    list-style: none;
}
.dynasty-about-value:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

.dynasty-about-value__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F7F7F7;
    color: var(--dynasty-brand-gold, #D4AF37);
}

.dynasty-about-value__title {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    margin: 0 !important;
    line-height: 1.3;
}

.dynasty-about-value__desc {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: var(--dynasty-gray-brand, #6D6E70);
    line-height: 1.55;
    margin: 0;
}


/* =============================================================================
   4) BOTTOM CARDS — 3 cards full-bleed con bg image + label overlay
   ============================================================================ */

.dynasty-about-bottom {
    background: var(--dynasty-black-obsidian, #0A0A0A);
}

.dynasty-about-bottom__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 768px) {
    .dynasty-about-bottom__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dynasty-about-bottom-card {
    position: relative;
    display: block;
    overflow: hidden;
    height: 400px;
    color: var(--dynasty-white, #FFFFFF) !important;
    text-decoration: none !important;
}
@media (max-width: 767px) {
    /* En mobile reducimos un poco para que no se vea tan dominante apilado. */
    .dynasty-about-bottom-card {
        height: 280px;
    }
}

.dynasty-about-bottom-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.55s ease;
}
.dynasty-about-bottom-card:hover .dynasty-about-bottom-card__bg {
    transform: scale(1.04);
}

.dynasty-about-bottom-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.30) 50%,
        rgba(0, 0, 0, 0.75) 100%
    );
    pointer-events: none;
    transition: background 0.4s ease;
}
/* Hover: oscurecer toda la card para que resalte el texto revelado. */
.dynasty-about-bottom-card:hover .dynasty-about-bottom-card__overlay,
.dynasty-about-bottom-card:focus-visible .dynasty-about-bottom-card__overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.70) 50%,
        rgba(0, 0, 0, 0.88) 100%
    );
}

/* Contenido anclado al fondo (título + descripción + CTA). */
.dynasty-about-bottom-card__content {
    position: absolute;
    z-index: 2;
    left: clamp(20px, 3vw, 32px);
    right: clamp(20px, 3vw, 32px);
    bottom: clamp(20px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dynasty-about-bottom-card__label {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif);
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--dynasty-white, #FFFFFF);
    text-transform: none;
    letter-spacing: 0.01em;
}

/* Descripción — oculta, se revela en hover. */
.dynasty-about-bottom-card__desc {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height 0.45s ease, opacity 0.4s ease 0.05s, transform 0.45s ease, margin-top 0.45s ease;
}
.dynasty-about-bottom-card:hover .dynasty-about-bottom-card__desc,
.dynasty-about-bottom-card:focus-visible .dynasty-about-bottom-card__desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 12px;
    transform: translateY(0);
}

/* CTA (solo card 1) — visual; el click va al link de toda la card. */
.dynasty-about-bottom-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--dynasty-white, #FFFFFF);
    white-space: nowrap;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height 0.45s ease, opacity 0.4s ease 0.1s, transform 0.45s ease, margin-top 0.45s ease, background 0.2s ease, color 0.2s ease;
}
.dynasty-about-bottom-card:hover .dynasty-about-bottom-card__cta,
.dynasty-about-bottom-card:focus-visible .dynasty-about-bottom-card__cta {
    max-height: 60px;
    opacity: 1;
    margin-top: 18px;
    transform: translateY(0);
}
.dynasty-about-bottom-card__cta:hover {
    background: var(--dynasty-white, #FFFFFF);
    color: var(--dynasty-black-obsidian, #0A0A0A);
}
.dynasty-about-bottom-card__arrow {
    display: inline-flex;
    align-items: center;
}