/**
 * Vordonia Athenolia - Family Tradition Page
 * @package Vordonia
 * @since 1.0.0
 */

/* ═══ HERO ═══ */
.family-hero { position: relative; min-height: 50vh; display: flex; align-items: center; justify-content: center; background-color: var(--vordonia-primary); padding-top: var(--header-height); text-align: center; overflow: hidden; }
.family-hero__bg { position: absolute; inset: 0; }
.family-hero__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.25; }
.family-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(143,13,18,0.85), rgba(107,10,14,0.9)); }
.family-hero__container { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 5rem 2rem; }
.family-hero__title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; font-style: italic; color: var(--vordonia-white); margin-bottom: 1rem; }
.family-hero__subtitle { font-size: 1.15rem; color: rgba(255,255,255,0.85); line-height: 1.7; }

/* ═══ LEGACY ═══ */
.family-legacy { padding: var(--section-padding) 2rem; background-color: var(--vordonia-cream); }
.family-legacy__container { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: center; }
.family-legacy__heading { font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; color: var(--vordonia-black); margin-bottom: 1.5rem; text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--vordonia-secondary); text-decoration-thickness: 3px; }
.family-legacy__text { font-size: 1.05rem; line-height: 1.85; color: var(--vordonia-text); }
.family-legacy__text p { margin-bottom: 1.25rem; }

/* ═══ GENERATIONS ═══ */
.family-generations { padding: var(--section-padding) 2rem; background-color: var(--vordonia-white); }
.family-generations__container { max-width: var(--max-width); margin: 0 auto; }
.family-generations__heading { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; text-align: center; margin-bottom: 3.5rem; color: var(--vordonia-black); }

.family-gen { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: center; margin-bottom: 4rem; }
.family-gen--reversed { direction: rtl; }
.family-gen--reversed > * { direction: ltr; }
.family-gen__image { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 25px rgba(0,0,0,0.1); }
.family-gen__image img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.5s ease; }
.family-gen__image:hover img { transform: scale(1.04); }
.family-gen__placeholder { width: 100%; height: 350px; background: linear-gradient(135deg, var(--vordonia-secondary), var(--vordonia-cream)); border-radius: 12px; }
.family-gen__name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; font-style: italic; color: var(--vordonia-primary); margin-bottom: 0.75rem; }
.family-gen__story { font-size: 1.05rem; line-height: 1.85; color: var(--vordonia-text); }

/* ═══ VALUES ═══ */
.family-values { padding: var(--section-padding) 2rem; background-color: var(--vordonia-cream); }
.family-values__container { max-width: 850px; margin: 0 auto; text-align: center; }
.family-values__heading { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--vordonia-black); margin-bottom: 2rem; }
.family-values__content { font-size: 1.1rem; line-height: 1.9; color: var(--vordonia-text); }
.family-values__content p { margin-bottom: 1.25rem; }

/* ═══ GALLERY ═══ */
.family-gallery { background-color: var(--vordonia-cream); }
.family-gallery__container { max-width: var(--max-width); margin: 0 auto; padding: 4rem 2rem; }
.family-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.family-gallery__item { border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.family-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.family-gallery__item:hover img { transform: scale(1.08); }

/* ═══ CTA ═══ */
.family-cta { background-color: var(--vordonia-primary); }
.family-cta__container { max-width: 800px; margin: 0 auto; padding: 5rem 2rem; text-align: center; }
.family-cta__heading { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; font-style: italic; color: var(--vordonia-white); margin-bottom: 2rem; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .family-legacy__container { grid-template-columns: 1fr; gap: 2.5rem; }
    .family-gen { grid-template-columns: 1fr; }
    .family-gen--reversed { direction: ltr; }
    .family-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .family-gallery__grid { grid-template-columns: 1fr; }
}