/* =============================================================
   PHILOSOPHY PAGE — Page-specific CSS
   ============================================================= */

.phil { padding-block: var(--space-section); background: var(--color-surface); }

.phil__stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Base block ── */
.phil-block {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    padding-block: clamp(2rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--color-border);
}
.phil-block:last-child { border-bottom: none; }

.phil-block--icon-left  { grid-template-columns: 100px 1fr; }
.phil-block--icon-right { grid-template-columns: 1fr 100px; }
.phil-block--full       { grid-template-columns: 1fr; }

.phil-block__text p {
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    line-height: 1.9;
    color: var(--color-muted);
    margin-bottom: 0.9rem;
}
.phil-block__text p:last-child { margin-bottom: 0; }

/* ── Icon wrap: circle + connector ── */
.phil-block__icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.phil-block__icon-circle {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 3px dashed rgba(255,255,255,0.4);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.phil-block__icon-circle--gold   { background: #b8860b; }
.phil-block__icon-circle--green  { background: #1a7a3c; }
.phil-block__icon-circle--navy   { background: var(--color-primary); }
.phil-block__icon-circle--purple { background: #7b2fa6; }

.phil-block__connector {
    width: 2px;
    flex: 1;
    min-height: 30px;
    background: linear-gradient(to bottom, var(--color-border), transparent);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .phil-block--icon-left,
    .phil-block--icon-right { grid-template-columns: 1fr; }
    .phil-block__icon-wrap { flex-direction: row; align-items: center; }
    .phil-block__connector { display: none; }
    .phil-block--icon-right .phil-block__icon-wrap { order: -1; }
    .phil-block__icon-circle { width: 56px; height: 56px; }
}