/* ── SOORTEN PAGINA ── */

/* Foto placeholder */
.photo-placeholder {
    background: var(--surface-2);
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 20px;
}

.photo-placeholder span { font-weight:600; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; }
.photo-placeholder small { color:rgba(0,0,0,0.25); font-size:0.7rem; }

/* Page hero */
.page-hero-soorten {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 72px 32px 64px;
}

.page-hero-soorten-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.page-hero-soorten h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.02;
    margin-bottom: 16px;
}

.page-hero-soorten p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.soorten-tags {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.soorten-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-bg);
    border: 1px solid rgba(45,106,49,0.2);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
}

/* Featured species */
.featured-species {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 64px;
}

.featured-species-image {
    min-height: 480px;
    overflow: hidden;
}

.featured-species-image img { width:100%; height:100%; object-fit:cover; }

.featured-species-body {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-species-body h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 6px;
}

.latin-name { font-style:italic; color:var(--muted); font-size:0.95rem; margin-bottom:22px; display:block; }

.featured-species-body p { color:var(--muted); line-height:1.75; margin-bottom:14px; font-size:0.97rem; }

.feature-list { list-style:none; padding:0; margin:16px 0 28px; display:flex; flex-direction:column; gap:10px; }

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.4;
}

.feature-list li::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 7px;
    flex-shrink: 0;
}

/* Badges */
.id-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-right: 6px;
}

.badge-inv  { background:#fee2e2; color:#991b1b; }
.badge-inh  { background:#dcfce7; color:#166534; }
.badge-plan { background:#fef3c7; color:#92400e; }
.badge-grey { background:#f1f5f9; color:#64748b; }

/* Vergelijkingstabel */
.compare-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    margin-bottom: 64px;
}

.compare-header {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.compare-header-cell {
    padding: 16px 24px;
    border-right: 1px solid var(--line);
}

.compare-header-cell:last-child { border-right: none; }

.compare-header-cell .sp-name {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--text);
}

.compare-header-cell .sp-latin { font-style:italic; font-size:0.78rem; color:var(--muted); }

.compare-header-photo { height: 130px; }
.compare-header-photo img { width:100%; height:100%; object-fit:cover; }

.compare-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    border-top: 1px solid var(--line);
}

.compare-row:hover { background: var(--surface-2); }

.compare-cell {
    padding: 13px 24px;
    font-size: 0.88rem;
    border-right: 1px solid var(--line);
    display: flex;
    align-items: center;
}

.compare-cell:last-child { border-right: none; }
.compare-cell.label { font-weight: 600; color: var(--muted); font-size: 0.8rem; }
.tag-inv { font-weight: 700; color: #991b1b; }
.tag-inh { font-weight: 700; color: #166534; }

/* ID Kaarten */
.id-card-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
    margin-bottom: 64px;
}

.id-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.id-card-image { height: 220px; }
.id-card-image img { width:100%; height:100%; object-fit:cover; }
.id-card-body { padding: 26px; }

.id-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.id-card .lat { font-style:italic; color:var(--muted); font-size:0.85rem; margin-bottom:14px; display:block; }

.id-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.id-spec { background:var(--surface-2); border-radius:8px; padding:10px 12px; }
.id-spec-label { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:3px; }
.id-spec-value { font-size:0.86rem; font-weight:600; }
.id-card p { color:var(--muted); font-size:0.88rem; line-height:1.65; }

/* Seizoenskalender */
.calendar-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 64px;
}

.calendar-head { padding: 32px 36px 24px; }

.calendar-head h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}

.calendar-head p { color:var(--muted); font-size:0.9rem; }

.cal-grid { display:grid; grid-template-columns:160px repeat(12,1fr); }
.cal-lbl { padding:10px 0 10px 36px; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); background:var(--surface-2); }
.cal-mon { padding:10px 4px; text-align:center; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); background:var(--surface-2); }
.cal-sp  { padding:14px 36px; font-size:0.86rem; font-weight:600; border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.cal-sp small { font-style:italic; font-size:0.73rem; color:var(--muted); font-weight:400; }
.cal-c   { padding:8px 3px; border-bottom:1px solid var(--line); border-left:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.bar     { width:100%; height:16px; border-radius:4px; }
.bh      { background:var(--accent); opacity:.85; }
.bm      { background:var(--accent); opacity:.4; }
.bl      { background:var(--accent); opacity:.18; }
.bn      { background:transparent; }
.cal-legend { padding:14px 36px 18px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.leg     { display:flex; align-items:center; gap:7px; font-size:0.76rem; color:var(--muted); }
.leg-dot { width:18px; height:9px; border-radius:3px; }

/* Wat te doen */
.todo-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2px;
    background: var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 64px;
}

.todo-card { background: var(--surface); padding: 36px 30px; }

.todo-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.todo-card h3 { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.todo-card p  { color:var(--muted); font-size:0.9rem; line-height:1.7; margin:0; }

.todo-warn {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-top: 14px;
    font-size: 0.83rem;
    color: #9a3412;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.5;
}

/* Andere soorten */
.other-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
}

.sp-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

.sp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.07); }
.sp-img { height: 180px; }
.sp-img img { width:100%; height:100%; object-fit:cover; }
.sp-body { padding: 20px; }
.sp-card h3 { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700; margin-bottom:3px; }
.sp-lat { font-style:italic; color:var(--muted); font-size:0.8rem; margin-bottom:10px; display:block; }
.sp-card p { color:var(--muted); font-size:0.85rem; line-height:1.6; margin:0; }

/* Responsive */
@media (max-width: 1000px) {
    .page-hero-soorten-inner,
    .featured-species,
    .id-card-grid,
    .todo-grid,
    .other-grid { grid-template-columns: 1fr; }

    .compare-section,
    .calendar-wrap { overflow-x: auto; }

    .featured-species-body { padding: 32px 24px; }
    .featured-species-image { min-height: 280px; }
}

@media (max-width: 640px) {
    .id-specs { grid-template-columns: 1fr; }
    .todo-grid { grid-template-columns: 1fr; }
    .other-grid { grid-template-columns: 1fr; }
    .page-hero-soorten { padding: 52px 20px 44px; }
}