/* ===================================================
   LINH ANH CLINIC — MAIN STYLESHEET
   Khởi tạo: CSS Design Tokens & Full Theme Styles
   =================================================== */

/* ─── CSS Variables ────────────────────────────────── */
:root {
    --color-primary:        #C8956A;
    --color-primary-light:  #E8C5A8;
    --color-primary-dark:   #A0714A;
    --color-secondary:      #3D6B6B;
    --color-secondary-light:#5A9696;
    --color-secondary-dark: #2A4C4C;
    --color-accent:         #F5EDE4;

    --color-white:     #FFFFFF;
    --color-off-white: #FAFAF8;
    --color-light:     #F5F3EF;
    --color-gray-100:  #F0EDE8;
    --color-gray-200:  #E2DDD6;
    --color-gray-300:  #C8C0B4;
    --color-gray-400:  #A89E92;
    --color-gray-500:  #887C70;
    --color-dark:      #2C2420;
    --color-black:     #1A1210;

    --color-text:         #3A3228;
    --color-text-light:   #6B5E52;
    --color-text-muted:   #9A8E82;
    --color-text-inverse: #FFFFFF;

    --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent:  'Lato', sans-serif;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-md:   1.125rem;
    --font-size-lg:   1.25rem;
    --font-size-xl:   1.5rem;
    --font-size-2xl:  2rem;
    --font-size-3xl:  2.5rem;
    --font-size-4xl:  3rem;
    --font-size-5xl:  3.75rem;

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:   1.2;
    --line-height-snug:    1.4;
    --line-height-base:    1.6;
    --line-height-relaxed: 1.8;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --container-2xl: 1440px;

    --section-pad-y: var(--space-24);
    --section-pad-x: var(--space-6);

    --border-color: var(--color-gray-200);
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-full:  9999px;

    --shadow-sm: 0 1px 3px rgba(44,36,32,0.08);
    --shadow-md: 0 4px 16px rgba(44,36,32,0.10);
    --shadow-lg: 0 8px 32px rgba(44,36,32,0.14);
    --shadow-xl: 0 16px 48px rgba(44,36,32,0.18);

    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-slower: 600ms ease;

    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
}

/* ─── Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-primary-dark); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ─── Typography ──────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-dark);
}
h1 { font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl)); }
h2 { font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl)); }
h3 { font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl)); }
h4 { font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-2xl)); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }
p  { margin-bottom: var(--space-4); line-height: var(--line-height-relaxed); }
p:last-child { margin-bottom: 0; }

/* ─── Layout ──────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--section-pad-x);
}
.container--sm  { max-width: var(--container-sm); }
.container--lg  { max-width: var(--container-lg); }

.section         { padding-block: var(--section-pad-y); }
.section--sm     { padding-block: var(--space-16); }
.section--lg     { padding-block: var(--space-32); }
.section--light  { background: var(--color-light); }
.section--accent { background: var(--color-accent); }
.section--dark   { background: var(--color-dark); color: var(--color-text-inverse); }

.content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-12);
    align-items: start;
}
.content-with-sidebar.no-sidebar,
.content-with-sidebar:has(.sidebar:empty) {
    grid-template-columns: 1fr;
}

.text-center { text-align: center; }

/* ─── Section Header ──────────────────────────────── */
.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}
.section-eyebrow {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    position: relative;
    padding: 0 var(--space-8);
}
.section-eyebrow::before,
.section-eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 24px;
    height: 1px;
    background: var(--color-primary);
}
.section-eyebrow::before { right: 0; }
.section-eyebrow::after  { left: 0; }

.section-title    { color: var(--color-dark); margin-bottom: var(--space-4); }
.section-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-light);
    max-width: 560px;
    margin-inline: auto;
    line-height: var(--line-height-relaxed);
}

/* ─── Buttons ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}
.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn--secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn--secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}
.btn--white {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}
.btn--white:hover {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}
.btn--dark {
    background: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}
.btn--lg  { padding: var(--space-4) var(--space-10); font-size: var(--font-size-base); }
.btn--sm  { padding: var(--space-2) var(--space-5); font-size: var(--font-size-xs); }

/* ─── Top Bar ─────────────────────────────────────── */
.site-topbar {
    background: var(--color-secondary);
    color: rgba(255,255,255,0.85);
    font-size: var(--font-size-xs);
    padding-block: var(--space-2);
}
.site-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.site-topbar a { color: rgba(255,255,255,0.8); }
.site-topbar a:hover { color: var(--color-white); }
.site-topbar__contact { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.site-topbar__social  { display: flex; gap: var(--space-3); }
.site-topbar__social a {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    transition: all var(--transition-fast);
}
.site-topbar__social a:hover { background: var(--color-primary); border-color: var(--color-primary); }

/* ─── Site Header ─────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-gray-100);
    transition: box-shadow var(--transition-base);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: var(--space-8);
}

/* Logo */
.site-logo img    { height: 48px; width: auto; }
.site-logo__text  {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    line-height: 1.1;
}
.site-logo__text span { color: var(--color-primary); }

/* Nav */
.site-nav { flex: 1; }
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}
.nav-menu li { position: relative; }
.nav-menu a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
    color: var(--color-primary);
    background: var(--color-accent);
}

/* Dropdown */
.nav-menu .sub-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-100);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-base);
    z-index: var(--z-dropdown);
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-menu .sub-menu a {
    border-radius: 0;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-gray-100);
}
.nav-menu .sub-menu li:last-child a { border-bottom: none; }

/* Mobile toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-dark);
    border-radius: 2px;
    transition: all var(--transition-base);
}
.nav-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ─── Hero ────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-light) 60%, var(--color-gray-100) 100%);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(26,18,16,0.65) 0%, rgba(26,18,16,0.3) 60%, rgba(26,18,16,0.05) 100%);
}
.hero__content { position: relative; z-index: 1; max-width: 640px; }
.hero__eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    margin-bottom: var(--space-5);
}
.hero__title  { font-family: var(--font-heading); font-weight: var(--font-weight-bold); color: var(--color-white); line-height: 1.1; margin-bottom: var(--space-6); }
.hero__subtitle { font-size: var(--font-size-md); color: rgba(255,255,255,0.85); line-height: var(--line-height-relaxed); margin-bottom: var(--space-10); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero__stats   {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255,255,255,0.2);
    flex-wrap: wrap;
}
.hero__stat-value { font-family:var(--font-heading); font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); color:var(--color-primary-light); line-height:1; }
.hero__stat-label { font-size:var(--font-size-xs); color:rgba(255,255,255,0.7); margin-top:var(--space-1); }

/* ─── Services Grid ───────────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--space-6); }
.service-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--color-primary-light); }
.service-card__image { aspect-ratio: 4/3; overflow: hidden; }
.service-card__image img { width:100%; height:100%; object-fit:cover; transition: transform var(--transition-slower); }
.service-card:hover .service-card__image img { transform: scale(1.06); }
.service-card__icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-lg);
    background: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-5);
    font-size: 1.75rem;
    transition: background var(--transition-base);
}
.service-card:hover .service-card__icon { background: var(--color-primary); }
.service-card__body   { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; }
.service-card__title  { font-family: var(--font-heading); font-size: var(--font-size-xl); color: var(--color-dark); margin-bottom: var(--space-3); transition: color var(--transition-base); }
.service-card:hover .service-card__title { color: var(--color-primary); }
.service-card__desc   { font-size: var(--font-size-sm); color: var(--color-text-light); line-height: var(--line-height-relaxed); flex: 1; margin-bottom: var(--space-5); }
.service-card__link   { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary); display: inline-flex; align-items: center; gap: var(--space-2); transition: gap var(--transition-base); }
.service-card:hover .service-card__link { gap: var(--space-3); }

/* ─── About Section ───────────────────────────────── */
.about-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.about-section__image-main   { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.about-section__badge {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    text-align: center;
    display: inline-block;
    margin-top: var(--space-6);
    box-shadow: var(--shadow-lg);
}
.about-section__badge-value { font-family:var(--font-heading); font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); line-height:1; }
.about-section__badge-label { font-size:var(--font-size-xs); opacity:0.9; margin-top:var(--space-1); }
.about-features  { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-8); }
.about-feature   { display: flex; gap: var(--space-5); align-items: flex-start; }
.about-feature__icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.about-feature__title { font-weight:var(--font-weight-semibold); color:var(--color-dark); margin-bottom:var(--space-1); font-size:var(--font-size-md); }

/* ─── Team ────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.team-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-100);
    text-align: center;
    transition: all var(--transition-slow);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.team-card__photo { aspect-ratio: 3/4; overflow: hidden; position: relative; }
.team-card__photo img { width:100%; height:100%; object-fit:cover; object-position:center top; transition: transform var(--transition-slower); }
.team-card:hover .team-card__photo img { transform: scale(1.04); }
.team-card__body   { padding: var(--space-6); }
.team-card__name   { font-family:var(--font-heading); font-size:var(--font-size-xl); color:var(--color-dark); margin-bottom:var(--space-1); }
.team-card__role   { font-size:var(--font-size-sm); color:var(--color-primary); font-weight:var(--font-weight-medium); margin-bottom:var(--space-3); }
.team-card__bio    { font-size:var(--font-size-sm); color:var(--color-text-light); line-height:var(--line-height-relaxed); }

/* ─── Testimonials ────────────────────────────────── */
.testimonials-section { background: var(--color-light); }
.testimonials-slider  { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--space-6); }
.testimonial-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-100);
    position: relative;
}
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: var(--space-5);
    left: var(--space-8);
    font-family: var(--font-heading);
    font-size: 5rem;
    line-height: 1;
    color: var(--color-primary-light);
    opacity: 0.6;
    pointer-events: none;
}
.testimonial-card__stars  { color: #F5A623; font-size: var(--font-size-md); margin-bottom: var(--space-4); padding-top: var(--space-8); }
.testimonial-card__text   { color:var(--color-text-light); line-height:var(--line-height-relaxed); font-style:italic; margin-bottom:var(--space-6); }
.testimonial-card__author { display:flex; align-items:center; gap:var(--space-4); }
.testimonial-card__avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--color-primary-light); }
.testimonial-card__author-name  { font-weight:var(--font-weight-semibold); color:var(--color-dark); font-size:var(--font-size-sm); }
.testimonial-card__author-label { font-size:var(--font-size-xs); color:var(--color-text-muted); }

/* ─── Stats ───────────────────────────────────────── */
.stats-section { background: var(--color-primary); padding-block: var(--space-16); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-8); text-align:center; }
.stat-item__value { font-family:var(--font-heading); font-size:clamp(var(--font-size-3xl),4vw,4rem); font-weight:var(--font-weight-bold); color:#fff; line-height:1; margin-bottom:var(--space-2); }
.stat-item__suffix { font-size:var(--font-size-2xl); color:rgba(255,255,255,0.7); }
.stat-item__label  { font-size:var(--font-size-sm); color:rgba(255,255,255,0.8); letter-spacing:0.05em; }

/* ─── CTA section ─────────────────────────────────── */
.cta-section {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: var(--color-white);
    text-align: center;
    padding-block: var(--space-24);
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: -50%; left: -20%;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse, rgba(200,149,106,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.cta-section__title    { font-family:var(--font-heading); font-size:clamp(var(--font-size-2xl),4vw,var(--font-size-4xl)); color:#fff; margin-bottom:var(--space-4); }
.cta-section__subtitle { font-size:var(--font-size-md); color:rgba(255,255,255,0.8); margin-bottom:var(--space-10); max-width:560px; margin-inline:auto; }
.cta-section__actions  { display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; }

/* ─── Contact ─────────────────────────────────────── */
.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.contact-item    { display:flex; gap:var(--space-5); align-items:flex-start; margin-bottom:var(--space-8); }
.contact-item__icon {
    width:52px; height:52px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.contact-item__label { font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); letter-spacing:0.1em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-1); }
.contact-item__value { font-weight:var(--font-weight-medium); color:var(--color-dark); line-height:var(--line-height-snug); }
.contact-map { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.contact-map iframe { width:100%; height:400px; border:none; display:block; }

/* ─── Form Controls ───────────────────────────────── */
.form-group   { margin-bottom: var(--space-5); }
.form-label   { display:block; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text); margin-bottom:var(--space-2); }
.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    -webkit-appearance: none;
}
.form-control:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(200,149,106,0.15); }
.form-control::placeholder { color:var(--color-text-muted); }
textarea.form-control { resize:vertical; min-height:140px; }

/* ─── Blog / Posts ────────────────────────────────── */
.posts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-8); }
.post-card  {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-slow);
}
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.post-card__thumbnail { aspect-ratio:16/9; overflow:hidden; }
.post-card__thumbnail img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slower); }
.post-card:hover .post-card__thumbnail img { transform:scale(1.05); }
.post-card__body     { padding:var(--space-6); }
.post-card__category { display:inline-block; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); letter-spacing:0.1em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-3); }
.post-card__title    { font-family:var(--font-heading); font-size:var(--font-size-xl); color:var(--color-dark); margin-bottom:var(--space-3); transition:color var(--transition-fast); }
.post-card:hover .post-card__title { color:var(--color-primary); }
.post-card__excerpt  { font-size:var(--font-size-sm); color:var(--color-text-light); line-height:var(--line-height-relaxed); margin-bottom:var(--space-5); }
.post-card__meta     { display:flex; align-items:center; gap:var(--space-4); font-size:var(--font-size-xs); color:var(--color-text-muted); }

/* ─── Entry Content ───────────────────────────────── */
.entry-content { max-width: 720px; margin-inline: auto; }
.entry-content h2,.entry-content h3,.entry-content h4 { margin-top:var(--space-10); margin-bottom:var(--space-4); }
.entry-content p { margin-bottom:var(--space-5); }
.entry-content ul,.entry-content ol { padding-left:var(--space-8); margin-bottom:var(--space-5); list-style:revert; }
.entry-content li { margin-bottom:var(--space-2); line-height:var(--line-height-relaxed); }
.entry-content blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-accent);
    padding: var(--space-6) var(--space-8);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: var(--space-8) 0;
    font-style: italic;
    color: var(--color-text-light);
}
.entry-content img { border-radius:var(--radius-md); margin:var(--space-8) 0; }

/* ─── Breadcrumb ──────────────────────────────────── */
.breadcrumb { background:var(--color-light); padding-block:var(--space-4); border-bottom:1px solid var(--color-gray-200); }
.breadcrumb__list { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); font-size:var(--font-size-sm); }
.breadcrumb__separator { color:var(--color-gray-400); }
.breadcrumb__item a { color:var(--color-text-light); }
.breadcrumb__item a:hover { color:var(--color-primary); }
.breadcrumb__item.is-current { color:var(--color-primary); font-weight:var(--font-weight-medium); }

/* ─── Page Header ─────────────────────────────────── */
.page-header {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-light) 100%);
    padding-block: var(--space-20);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-header__title { position:relative; font-family:var(--font-heading); color:var(--color-dark); margin-bottom:var(--space-4); }
.page-header__subtitle { position:relative; font-size:var(--font-size-md); color:var(--color-text-light); max-width:560px; margin-inline:auto; }

/* ─── Sidebar ─────────────────────────────────────── */
.sidebar .widget {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border: 1px solid var(--color-gray-100);
    box-shadow: var(--shadow-sm);
}
.sidebar .widget-title { font-family:var(--font-heading); font-size:var(--font-size-xl); color:var(--color-dark); margin-bottom:var(--space-5); padding-bottom:var(--space-3); border-bottom:2px solid var(--color-primary); }
.sidebar .widget ul { display:flex; flex-direction:column; gap:var(--space-2); }
.sidebar .widget ul li a { font-size:var(--font-size-sm); color:var(--color-text-light); display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) 0; border-bottom:1px solid var(--color-gray-100); transition:color var(--transition-fast); }
.sidebar .widget ul li a:hover { color:var(--color-primary); }

/* ─── Footer ──────────────────────────────────────── */
.site-footer { background:var(--color-dark); color:rgba(255,255,255,0.8); }
.site-footer__top {
    padding-block: var(--space-20);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-10);
}
.footer-brand__logo-text { font-family:var(--font-heading); font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:#fff; }
.footer-brand__logo-text span { color:var(--color-primary-light); }
.footer-brand__desc { font-size:var(--font-size-sm); color:rgba(255,255,255,0.65); line-height:var(--line-height-relaxed); margin-block:var(--space-5) var(--space-6); }
.footer-social { display:flex; gap:var(--space-3); }
.footer-social a {
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.2);
    color:rgba(255,255,255,0.7);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--font-size-sm);
    transition:all var(--transition-base);
}
.footer-social a:hover { background:var(--color-primary); border-color:var(--color-primary); color:#fff; transform:translateY(-2px); }
.footer-widget__title { font-family:var(--font-body); font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); letter-spacing:0.1em; text-transform:uppercase; color:#fff; margin-bottom:var(--space-6); }
.footer-widget ul  { display:flex; flex-direction:column; gap:var(--space-3); }
.footer-widget ul li a { font-size:var(--font-size-sm); color:rgba(255,255,255,0.65); transition:color var(--transition-fast); display:inline-flex; align-items:center; gap:var(--space-2); }
.footer-widget ul li a:hover { color:var(--color-primary-light); }
.site-footer__bottom { border-top:1px solid rgba(255,255,255,0.08); padding-block:var(--space-6); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); font-size:var(--font-size-sm); color:rgba(255,255,255,0.5); flex-wrap:wrap; }
.site-footer__bottom a { color:rgba(255,255,255,0.65); }
.site-footer__bottom a:hover { color:var(--color-primary-light); }

/* ─── Pagination ──────────────────────────────────── */
.pagination { display:flex; justify-content:center; align-items:center; gap:var(--space-2); margin-top:var(--space-16); flex-wrap:wrap; }
.pagination a, .pagination span {
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    border-radius:50%;
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-medium);
    border:1px solid var(--color-gray-200);
    color:var(--color-text);
    transition:all var(--transition-fast);
}
.pagination a:hover, .pagination .current { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

/* ─── 404 ─────────────────────────────────────────── */
.error-404 { text-align:center; padding-block:var(--space-32); }
.error-404__code { font-family:var(--font-heading); font-size:8rem; font-weight:var(--font-weight-bold); color:var(--color-primary-light); line-height:1; margin-bottom:var(--space-4); }
.error-404__title { font-family:var(--font-heading); font-size:var(--font-size-3xl); margin-bottom:var(--space-4); }
.error-404__desc  { color:var(--color-text-light); margin-bottom:var(--space-8); max-width:440px; margin-inline:auto; }

/* ─── Search Form ─────────────────────────────────── */
.search-form { display:flex; border:1px solid var(--color-gray-200); border-radius:var(--radius-full); overflow:hidden; background:var(--color-white); box-shadow:var(--shadow-sm); }
.search-form input[type="search"] { flex:1; padding:var(--space-3) var(--space-5); border:none; outline:none; font-size:var(--font-size-sm); background:transparent; color:var(--color-text); }
.search-form button[type="submit"] { padding:var(--space-3) var(--space-5); background:var(--color-primary); color:#fff; border:none; cursor:pointer; transition:background var(--transition-fast); }
.search-form button[type="submit"]:hover { background:var(--color-primary-dark); }

/* ─── Accessibility ───────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* ─── Scroll Reveal ───────────────────────────────── */
.reveal       { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal-left  { opacity:0; transform:translateX(-30px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal-right { opacity:0; transform:translateX(30px);  transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity:1; transform:translate(0); }

/* ─── Embed responsive ────────────────────────────── */
.embed-responsive { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.embed-responsive iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --section-pad-y: var(--space-20); }
    .about-section, .contact-section { grid-template-columns:1fr; gap:var(--space-10); }
    .site-footer__top { grid-template-columns:1fr 1fr; gap:var(--space-8); }
    .content-with-sidebar { grid-template-columns:1fr; }
}

@media (max-width: 768px) {
    :root { --section-pad-y:var(--space-16); --section-pad-x:var(--space-4); }

    .nav-toggle { display:flex; }
    .site-header__cta { display:none; }

    .site-nav {
        position:fixed;
        top:72px; left:0; right:0; bottom:0;
        background: var(--color-white);
        padding: var(--space-8) var(--space-6);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        z-index: var(--z-overlay);
    }
    .site-nav.is-open { transform:translateX(0); }
    .nav-menu { flex-direction:column; align-items:flex-start; gap:0; }
    .nav-menu > li { width:100%; border-bottom:1px solid var(--color-gray-100); }
    .nav-menu a { padding:var(--space-4) 0; font-size:var(--font-size-base); border-radius:0; }
    .nav-menu .sub-menu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding-left:var(--space-4); background:var(--color-light); border-radius:var(--radius-md); margin:var(--space-2) 0; }

    .hero { min-height:70vh; }
    .hero__stats { flex-wrap:wrap; gap:var(--space-5); }

    .site-footer__top { grid-template-columns:1fr; }
    .site-footer__bottom { flex-direction:column; text-align:center; }
    .section-header { margin-bottom:var(--space-10); }
    .site-topbar__contact { flex-direction:column; gap:var(--space-2); align-items:flex-start; }
}

@media (max-width: 480px) {
    .hero__actions { flex-direction:column; }
    .hero__actions .btn { width:100%; justify-content:center; }
    .contact-section { grid-template-columns:1fr; }
}

@media print {
    .site-header, .site-footer, .site-topbar, .nav-toggle, .cta-section { display:none; }
    body { font-size:12pt; color:#000; }
    a { color:#000; text-decoration:underline; }
    .container { max-width:100%; padding:0; }
}