/* ================================================
   PROCESS / BUILD LOG — Extra styles
   (imports style.css from same folder)
   ================================================ */

/* ── LOG HEADER ─────────────────────────────── */
.log-header {
    min-height: 55vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 8rem 2rem 5rem;
    background:
        linear-gradient(150deg, rgba(5,8,15,0.96) 0%, rgba(10,18,35,0.93) 100%),
        url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1920&q=80')
        center / cover no-repeat;
}
.log-header-content { max-width: 760px; }

/* Stats strip */
.log-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-top: 2.5rem;
    border: 1px solid var(--gold-border);
    background: var(--gold-dim);
    max-width: 600px; margin-left: auto; margin-right: auto;
}
.log-stat {
    flex: 1; padding: 1.1rem 1.5rem; text-align: center;
}
.log-stat-div { width: 1px; background: var(--gold-border); align-self: stretch; }
.ls-val {
    font-size: 1.1rem; font-weight: 700; color: var(--gold);
    letter-spacing: -0.01em; margin-bottom: 0.2rem;
}
.ls-lbl { font-size: 0.65rem; color: var(--t2); letter-spacing: 0.06em; text-transform: uppercase; }


/* ── MAIN LOG BODY ───────────────────────────── */
.log-main { padding: 5rem 0; background: var(--void); }

/* Phase legend */
.phase-legend {
    display: flex; gap: 1.5rem; align-items: center;
    margin-bottom: 3.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--t2); }

/* Status badges */
.badge {
    display: inline-block;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.22rem 0.7rem; border-radius: 2px;
    flex-shrink: 0;
}
.badge-done    { background: rgba(34,197,94,0.12);  color: #22C55E; border: 1px solid rgba(34,197,94,0.25); }
.badge-active  { background: rgba(201,168,76,0.12); color: var(--gold); border: 1px solid var(--gold-border); animation: badgepulse 2s ease-in-out infinite; }
.badge-next    { background: rgba(99,102,241,0.10); color: #818CF8; border: 1px solid rgba(99,102,241,0.22); }
.badge-planned { background: var(--card); color: var(--t2); border: 1px solid var(--border); }

@keyframes badgepulse {
    0%,100% { opacity: 1; } 50% { opacity: 0.6; }
}


/* ── PHASE BLOCK ─────────────────────────────── */
.phase-block {
    margin-bottom: 3px;
    border: 1px solid var(--border);
    background: var(--card);
    transition: background 0.22s;
}
.phase-block:last-child { margin-bottom: 0; }

.phase-header {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1.4rem 2rem;
    border-bottom: 1px solid var(--border);
    background: var(--dark);
    flex-wrap: wrap;
}
.phase-num {
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold); flex-shrink: 0; min-width: 60px;
}
.phase-title-group {
    display: flex; align-items: center; gap: 1rem; flex: 1; flex-wrap: wrap;
}
.phase-title {
    font-family: 'Inter', sans-serif;
    font-size: 1rem; font-weight: 600; color: var(--t1); margin: 0;
}
.phase-date {
    font-size: 0.72rem; color: var(--t2); letter-spacing: 0.04em;
    margin-left: auto;
}

.phase-body {
    display: grid; grid-template-columns: 1fr 1.6fr;
    gap: 0; min-height: 240px;
}

.phase-desc {
    padding: 2rem 2rem;
    border-right: 1px solid var(--border);
}
.phase-desc p {
    font-size: 0.85rem; color: var(--t2); line-height: 1.8;
}
.phase-list {
    list-style: none; margin-top: 1.2rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.phase-list li {
    font-size: 0.8rem; color: var(--t2); line-height: 1.4;
    padding-left: 0.2rem;
}


/* ── PHOTO GRID ─────────────────────────────── */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    background: var(--border);
    align-content: start;
}

.photo-item {
    position: relative; overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--card-2);
}
.photo-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.photo-item:hover img { transform: scale(1.04); }
.photo-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(5,8,15,0.92), transparent);
    padding: 1.5rem 0.8rem 0.6rem;
    font-size: 0.65rem; color: var(--t1);
    letter-spacing: 0.04em;
}

/* Placeholder slots */
.photo-placeholder {
    aspect-ratio: 4/3;
    background: var(--card);
    border: 1px dashed var(--border);
    display: flex; align-items: center; justify-content: center;
}
.placeholder-inner {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    text-align: center; padding: 1rem;
}
.ph-icon { font-size: 1.8rem; opacity: 0.3; }
.ph-text { font-size: 0.68rem; color: var(--t3); line-height: 1.4; }


/* ── SENSOR GRID ─────────────────────────────── */
.sensor-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.8rem; margin-top: 1.2rem;
}
.sensor-item {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.9rem 1rem;
    background: var(--card-2);
    border: 1px solid var(--border);
}
.sensor-icon { font-size: 1.2rem; flex-shrink: 0; }
.sensor-name { font-size: 0.78rem; font-weight: 600; color: var(--t1); margin-bottom: 0.15rem; }
.sensor-where { font-size: 0.7rem; color: var(--t2); line-height: 1.3; }


/* ── PHASE 0 — 50/50 LAYOUT ─────────────────── */

/* Phase 0 — force 50/50 grid */
#phase-0 .phase-body {
    grid-template-columns: 1fr 1fr;
}

.p0-right {
    display: flex; flex-direction: column;
    border-left: 1px solid var(--border);
    background: var(--card);
}

/* Boundary plan */
.p0-plan {
    flex: 1;
    padding: 1.2rem 1.4rem;
    display: flex; flex-direction: column; gap: 0.7rem;
    border-bottom: 1px solid var(--border);
}
.p0-plan-label {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold);
}
.p0-plan-img {
    width: 100%; height: auto;
    border: 1px solid var(--border);
    display: block;
    filter: brightness(0.92) contrast(1.05);
}
.p0-plan-meta {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    font-size: 0.6rem; color: var(--t3); letter-spacing: 0.05em;
}

/* Director seal */
.director-seal {
    display: flex; align-items: center; gap: 1.4rem;
    padding: 1.4rem 1.6rem;
    background: rgba(201,168,76,0.04);
    border-top: 1px solid var(--gold-border);
}
.seal-ring {
    width: 58px; height: 58px; flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--gold-dim);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 5px rgba(201,168,76,0.07), 0 0 16px rgba(201,168,76,0.1);
}
.seal-ring-inner {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px dashed var(--gold-border);
    display: flex; align-items: center; justify-content: center;
}
.seal-check {
    font-size: 1.3rem; color: var(--gold); font-weight: 900; line-height: 1;
}
.seal-label {
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 0.25rem;
}
.seal-school {
    font-size: 0.92rem; font-weight: 700; color: var(--t1); margin-bottom: 0.15rem;
}
.seal-loc { font-size: 0.68rem; color: var(--t2); margin-bottom: 0.5rem; }
.seal-badge {
    display: inline-block;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #22C55E; border: 1px solid rgba(34,197,94,0.28);
    padding: 0.14rem 0.6rem; border-radius: 2px;
    background: rgba(34,197,94,0.07);
}

/* ── HEN CALLOUT ─────────────────────────────── */
.hen-callout {
    display: flex; align-items: flex-start; gap: 0.9rem;
    margin-top: 1.4rem;
    padding: 1.1rem 1.3rem;
    background: rgba(201,168,76,0.06);
    border: 1px solid var(--gold-border);
    border-left: 3px solid var(--gold);
}
.hen-icon { font-size: 1.6rem; flex-shrink: 0; }
.hen-title {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 0.2rem;
}
.hen-range {
    font-size: 1.1rem; font-weight: 700; color: var(--t1); letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}
.hen-note { font-size: 0.75rem; color: var(--t2); line-height: 1.5; }

/* Wide photo (spans 2 columns) */
.photo-item-wide {
    grid-column: span 2;
    aspect-ratio: 16/7;
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 900px) {
    .phase-body { grid-template-columns: 1fr; }
    .phase-desc { border-right: none; border-bottom: 1px solid var(--border); }
    .sensor-grid { grid-template-columns: 1fr; }
    .log-stats { flex-direction: column; }
    .log-stat-div { width: 100%; height: 1px; }
    .phase-header { gap: 0.8rem; }
    .phase-date { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
    .photo-grid { grid-template-columns: 1fr 1fr; }
    .phase-header { padding: 1rem 1.2rem; }
    .phase-desc { padding: 1.5rem 1.2rem; }
}