/* ============================================================
   Kênh Động Vật — Homepage CSS
   Converted from v0.dev design (Tailwind → plain CSS)
   ============================================================ */

:root {
    --kdv-bg:           #FAFAF7;
    --kdv-card:         #ffffff;
    --kdv-primary:      #2D6A2D;
    --kdv-accent:       #2D6A2D;
    --kdv-fg:           #1a1a1a;
    --kdv-muted:        #666666;
    --kdv-border:       #e5e5e0;
    --kdv-section-bg:   #E8E8E3;
    --kdv-gap:          3px;
}

/* ---- Reset for homepage ---- */
.kdv-homepage * { box-sizing: border-box; }
.kdv-homepage a { text-decoration: none; color: inherit; }
.kdv-homepage img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Container ---- */
.kdv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ---- Section title ---- */
.kdv-section-title {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kdv-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
}
.kdv-section-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 2rem;
    height: 2px;
    background: var(--kdv-primary);
}
.kdv-section-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.kdv-section-title-wrap .kdv-section-title {
    font-size: 1.5rem;
    margin-bottom: 0;
}
.kdv-section-title-wrap .kdv-section-title::after { display: none; }

/* ---- Badge ---- */
/* .kdv-badge moved to style.css (global) */

/* ================================================================
   1. HERO SECTION
   ================================================================ */
.kdv-hero {
    padding: 1.5rem 0;
}
.kdv-hero-grid {
    display: flex;
    gap: var(--kdv-gap);
    height: 500px;
}
.kdv-hero-main {
    position: relative;
    width: 50%;
    overflow: hidden;
    display: block;
}
.kdv-hero-main img,
.kdv-hero-side-item img {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}
.kdv-hero-main:hover img,
.kdv-hero-side-item:hover img { transform: scale(1.05); }

.kdv-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 40%, transparent 100%);
}
.kdv-hero-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
}
.kdv-hero-text .kdv-badge { margin-bottom: 0.75rem; }
.kdv-hero-text h2 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 0.5rem;
}
.kdv-hero-text .kdv-date {
    font-size: 0.8rem;
    color: rgba(255,255,255,.7);
}

/* Side 2×2 */
.kdv-hero-sides {
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--kdv-gap);
}
.kdv-hero-side-item {
    position: relative;
    overflow: hidden;
    display: block;
}
.kdv-hero-side-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
}
.kdv-hero-side-text .kdv-badge { font-size: 0.6rem; margin-bottom: 0.5rem; }
.kdv-hero-side-text h3 {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kdv-hero-side-text .kdv-date {
    font-size: 0.7rem;
    color: rgba(255,255,255,.7);
}

/* ================================================================
   2. WILDLIFE SECTION (ĐVHD) — 4-col card grid
   ================================================================ */
.kdv-wildlife-section,
.kdv-nature-section {
    background: var(--kdv-section-bg);
    padding: 64px 0;
}
/* .kdv-card-grid and .kdv-card moved to style.css (global) */

.kdv-view-all {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
.kdv-view-all a {
    display: inline-block;
    background: transparent;
    color: var(--kdv-primary);
    border: 1.5px solid var(--kdv-primary);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.625rem 2.5rem;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}
.kdv-view-all a:hover {
    background: var(--kdv-primary);
    color: #fff;
}

/* ================================================================
   3. MAIN + SIDEBAR LAYOUT
   ================================================================ */
.kdv-middle-section { padding: 2.5rem 0; background: #ffffff; }
.kdv-middle-wrap {
    display: flex;
    gap: 2rem;
}
.kdv-main-content {
    width: 66.666%;
    border: 1px solid var(--kdv-border);
    padding: 1rem;
}
.kdv-sidebar { width: 33.333%; }
.kdv-sidebar-inner {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---- Two category columns (Khám Phá + Tin Tức) ---- */
.kdv-cat-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.kdv-cat-col-title {
    position: relative;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kdv-fg);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}
.kdv-cat-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2rem;
    height: 2px;
    background: var(--kdv-primary);
}

/* Featured card in column */
.kdv-col-featured {
    display: block;
    margin-bottom: 1rem;
}
.kdv-col-featured:hover .kdv-col-featured-img img { transform: scale(1.05); }
.kdv-col-featured-img {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
}
.kdv-col-featured-img img {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}
.kdv-col-featured-body {
    background: var(--kdv-card);
    padding: 0.75rem;
}
.kdv-col-featured-body .kdv-badge { font-size: 0.6rem; margin-bottom: 0.25rem; }
.kdv-col-featured-body h4 {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--kdv-fg);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kdv-col-featured:hover .kdv-col-featured-body h4 { color: var(--kdv-primary); }

/* List items in column */
.kdv-col-list { display: flex; flex-direction: column; gap: 0.75rem; }
.kdv-col-list-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.kdv-col-list-img {
    position: relative;
    width: 5rem;
    height: 4rem;
    flex-shrink: 0;
    overflow: hidden;
}
.kdv-col-list-img img {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}
.kdv-col-list-item:hover .kdv-col-list-img img { transform: scale(1.05); }
.kdv-col-list-item h4 {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--kdv-fg);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kdv-col-list-item:hover h4 { color: var(--kdv-primary); }

/* ---- Thú Cưng list ---- */
.kdv-pet-section-title {
    position: relative;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kdv-fg);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}
.kdv-pet-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2rem;
    height: 2px;
    background: var(--kdv-primary);
}
.kdv-pet-list { display: flex; flex-direction: column; gap: 0; }
.kdv-pet-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--kdv-border);
}
.kdv-pet-item:last-child { border-bottom: none; margin-bottom: 0; }
.kdv-pet-img {
    position: relative;
    width: 5rem;
    height: 4rem;
    flex-shrink: 0;
    overflow: hidden;
}
.kdv-pet-img img {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}
.kdv-pet-item:hover .kdv-pet-img img { transform: scale(1.05); }
.kdv-pet-meta .kdv-badge { font-size: 0.6rem; margin-bottom: 0.25rem; }
.kdv-pet-meta h4 {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--kdv-fg);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kdv-pet-item:hover .kdv-pet-meta h4 { color: var(--kdv-primary); }

/* ---- Sidebar widgets ---- */
.kdv-widget {
    background: var(--kdv-card);
    border: 1px solid var(--kdv-border);
    padding: 1rem;
}
/* Facebook widget */
.kdv-fb-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.kdv-fb-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: #1877f2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kdv-fb-icon svg { width: 1.25rem; height: 1.25rem; }
.kdv-fb-name { font-weight: 700; font-size: 0.95rem; color: var(--kdv-fg); }
.kdv-fb-count { font-size: 0.75rem; color: var(--kdv-muted); }
.kdv-fb-buttons { display: flex; gap: 0.5rem; }
.kdv-fb-like {
    flex: 1;
    background: #1877f2;
    color: #fff;
    border: none;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}
.kdv-fb-like:hover { opacity: 0.9; }
.kdv-fb-follow {
    flex: 1;
    background: transparent;
    border: 1px solid var(--kdv-border);
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    color: var(--kdv-fg);
}
.kdv-fb-follow:hover { background: var(--kdv-section-bg); }

/* Animal profiles */
.kdv-widget-title {
    position: relative;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kdv-fg);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}
.kdv-widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2rem;
    height: 2px;
    background: var(--kdv-primary);
}
.kdv-profile-list { display: flex; flex-direction: column; gap: 0.75rem; }
.kdv-profile-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.kdv-profile-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.kdv-profile-avatar img {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.kdv-profile-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kdv-fg);
}
.kdv-profile-item:hover .kdv-profile-name { color: var(--kdv-primary); }
.kdv-profile-scientific {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--kdv-muted);
}

/* Social links widget */
.kdv-social-links { display: flex; gap: 0.5rem; }
.kdv-social-link {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.kdv-social-link:hover { opacity: 0.85; }
.kdv-social-link svg { width: 1.25rem; height: 1.25rem; }
.kdv-social-fb { background: #1877f2; }
.kdv-social-yt { background: #ff0000; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .kdv-hero-grid { height: auto; flex-direction: column; }
    .kdv-hero-main { width: 100%; height: 280px; }
    .kdv-hero-sides { width: 100%; grid-template-columns: 1fr 1fr; height: 240px; }

    .kdv-middle-wrap { flex-direction: column; }
    .kdv-main-content, .kdv-sidebar { width: 100%; }
    .kdv-cat-columns { grid-template-columns: 1fr; }
    .kdv-sidebar-inner { position: static; }
}
@media (max-width: 480px) {
    /* kdv-card-grid responsive handled in style.css */
}

/* ================================================================
   HABITATS SECTION
   ================================================================ */
.kdv-home-habitats {
    padding: 64px 0;
    background: var(--kdv-bg, #FAFAF7);
}
.kdv-habitats-eyebrow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kdv-primary, #2D6A2D);
    margin: 0 0 10px;
}
.kdv-habitats-heading {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--kdv-fg, #1a1a1a);
}
.kdv-habitats-sub {
    text-align: center;
    color: var(--kdv-muted, #666);
    font-size: 15px;
    max-width: 520px;
    margin: 0 auto 40px;
    line-height: 1.6;
}
.kdv-habitats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
a.kdv-habitat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 12px 24px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.kdv-habitat-tile .kdv-habitat-name,
a.kdv-habitat-tile .kdv-habitat-desc {
    color: #fff;
}
a.kdv-habitat-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    color: #fff;
}
.kdv-habitat-tile svg {
    width: 36px;
    height: 36px;
    stroke: rgba(255,255,255,0.9);
    flex-shrink: 0;
}
.kdv-habitat-name {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}
.kdv-habitat-desc {
    font-size: 11px;
    opacity: 0.82;
    text-align: center;
    line-height: 1.4;
}
.kdv-habitat--rainforest { background: #2D6A2D; }
.kdv-habitat--ocean      { background: #1A6B8A; }
.kdv-habitat--grassland  { background: #B87A2F; }
.kdv-habitat--desert     { background: #C4612F; }
.kdv-habitat--mountains  { background: #4A5568; }
.kdv-habitat--wetlands   { background: #1A7A5E; }

@media (max-width: 1023px) {
    .kdv-habitats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .kdv-habitats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kdv-habitats-heading { font-size: 22px; }
    .kdv-habitat-tile { padding: 22px 10px 18px; }
    .kdv-habitat-name { font-size: 11px; }

    .kdv-wildlife-section,
    .kdv-nature-section,
    .kdv-home-habitats,
    .kdv-home-articles { padding: 40px 0; }
}

/* ================================================================
   ARTICLES SECTION
   ================================================================ */
.kdv-home-articles {
    padding: 64px 0;
    background: var(--kdv-section-bg, #E8E8E3);
}
.kdv-articles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.kdv-article-card {
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    padding: 14px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    border: 1px solid rgba(0,0,0,0.06);
}
.kdv-article-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.kdv-article-img {
    width: 110px;
    min-width: 110px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--kdv-border, #e5e5e0);
}
.kdv-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kdv-article-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.kdv-article-text .kdv-badge {
    align-self: flex-start;
    margin-bottom: 2px;
}
.kdv-article-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--kdv-fg, #1a1a1a);
}
.kdv-article-card:hover .kdv-article-title {
    color: var(--kdv-primary, #2D6A2D);
}
.kdv-article-excerpt {
    font-size: 13px;
    color: var(--kdv-muted, #666);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.kdv-article-date {
    font-size: 11px;
    color: var(--kdv-muted, #666);
    margin-top: auto;
}
@media (max-width: 768px) {
    .kdv-articles-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .kdv-article-img { width: 90px; min-width: 90px; height: 68px; }
    .kdv-article-title { font-size: 14px; }
}