/* ============================================================================
   kHouse Dossier · Block patterns
   ----------------------------------------------------------------------------
   Repeating content blocks used across chapters: timeline cells, team grid,
   pillar grid (about), intel row (news tiles), and the button reset that
   lets an <a>-shaped intel-tile work as <button> too. Each block is layered
   on top of kd-sections.css; load order doesn't matter as long as both are
   present before the homepage main markup.
   ============================================================================ */

/* ============================== TIMELINE ================================ */
.kd-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--kd-border);
    border: 1px solid var(--kd-border);
}
@media (max-width: 880px) {
    .kd-timeline { grid-template-columns: 1fr 1fr; }
}
.kd-timeline__cell {
    position: relative;
    padding: var(--kd-s-7) var(--kd-s-5) var(--kd-s-6);
    background: var(--kd-bg);
    transition: background var(--kd-dur) var(--kd-ease);
    display: flex;
    flex-direction: column;
}
.kd-timeline__cell::before {
    /* horizontal rail across the top of the card with a dot at the year tick */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background:
        linear-gradient(to right, var(--kd-accent) 0, var(--kd-accent) 28px, var(--kd-border) 28px, var(--kd-border) 100%);
}
.kd-timeline__cell::after {
    /* the dot on the rail */
    content: "";
    position: absolute;
    top: -4px;
    left: 24px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--kd-accent);
    box-shadow: 0 0 0 3px var(--kd-bg);
}
.kd-timeline__cell:hover { background: var(--kd-bg-alt); }
.kd-timeline__year {
    font-family: var(--kd-font-mono);
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.01em;
    color: var(--kd-fg);
    line-height: 1;
    margin: 8px 0 var(--kd-s-5);
    font-variant-numeric: tabular-nums;
}
.kd-timeline__title {
    font-size: var(--kd-text-3);
    font-weight: var(--kd-w-semibold);
    margin: 0 0 var(--kd-s-3);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.kd-timeline__text {
    font-size: var(--kd-text-1);
    color: var(--kd-fg-soft);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

/* ============================== TEAM GRID =============================== */
.kd-team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--kd-border);
    border: 1px solid var(--kd-border);
}
@media (max-width: 880px) { .kd-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kd-team { grid-template-columns: 1fr; } }

.kd-team__member {
    background: var(--kd-bg);
    padding: var(--kd-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--kd-s-3);
    transition: background var(--kd-dur) var(--kd-ease);
}
.kd-team__member:hover { background: var(--kd-bg-alt); }
.kd-team__avatar {
    width: 56px; height: 56px;
    background: var(--kd-bg-sunken);
    border: 1px solid var(--kd-border);
    display: grid; place-items: center;
    font-family: var(--kd-font-mono);
    font-size: 14px;
    font-weight: var(--kd-w-semibold);
    letter-spacing: 0.05em;
    color: var(--kd-fg-soft);
}
.kd-team__name {
    font-size: var(--kd-text-3);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.005em;
}
.kd-team__role {
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}
.kd-team__mail {
    margin-top: auto;
    font-size: var(--kd-text-1);
    color: var(--kd-fg-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    padding-block: 2px;
    transition: color var(--kd-dur) var(--kd-ease), border-color var(--kd-dur) var(--kd-ease);
}
.kd-team__mail:hover { color: var(--kd-accent); border-color: var(--kd-accent); }

/* "+ You? Always recruiting" card spans the leftover columns on its row
   so the grid never finishes with empty negative space. Higher specificity
   here so the .kd-team__member base doesn't shadow the span. */
.kd-team .kd-team__member--cta {
    grid-column: span 3;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.kd-team .kd-team__member--cta .kd-team__avatar {
    width: 64px;
    height: 64px;
    font-size: 22px;
}
.kd-team .kd-team__member--cta .kd-team__mail {
    align-self: center;
}
@media (max-width: 880px) {
    .kd-team .kd-team__member--cta { grid-column: span 1; }
}

/* ============================== PILLAR GRID (about) ===================== */
.kd-pillars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--kd-border);
    border: 1px solid var(--kd-border);
}
@media (max-width: 1100px) { .kd-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kd-pillars { grid-template-columns: 1fr; } }
.kd-pillar {
    background: var(--kd-bg);
    padding: var(--kd-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--kd-s-3);
    min-height: 220px;
}
.kd-pillar__num {
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: var(--kd-track-mono);
    color: var(--kd-fg-muted);
}
.kd-pillar__title {
    font-size: var(--kd-text-4);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-wrap: balance;
}
.kd-pillar__text {
    font-size: var(--kd-text-1);
    color: var(--kd-fg-soft);
    line-height: 1.55;
}

/* ============================== INTEL ROW =============================== */
.kd-intel-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kd-s-5);
}
@media (max-width: 960px) { .kd-intel-row { grid-template-columns: 1fr; } }
.kd-intel-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kd-border);
    background: var(--kd-bg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color var(--kd-dur) var(--kd-ease), transform var(--kd-dur) var(--kd-ease);
}
.kd-intel-tile:hover { border-color: var(--kd-fg); transform: translateY(-2px); }
.kd-intel-tile__media {
    aspect-ratio: 16 / 10;
    background: var(--kd-bg-sunken);
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--kd-border);
}
.kd-intel-tile__media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(0.85) contrast(1.05);
    transition: filter var(--kd-dur) var(--kd-ease), transform var(--kd-dur) var(--kd-ease);
}
.kd-intel-tile:hover .kd-intel-tile__media img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.kd-intel-tile__cat {
    position: absolute; top: 12px; left: 12px;
}
.kd-intel-tile__body {
    padding: var(--kd-s-5);
    display: flex; flex-direction: column; gap: var(--kd-s-3);
    flex: 1;
}
.kd-intel-tile__meta {
    display: flex; justify-content: space-between; align-items: center;
}
.kd-intel-tile__title {
    font-size: var(--kd-text-4);
    font-weight: var(--kd-w-semibold);
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-wrap: balance;
}
.kd-intel-tile__text {
    font-size: var(--kd-text-1);
    color: var(--kd-fg-soft);
    line-height: 1.5;
}
.kd-intel-tile__more {
    margin-top: auto;
    font-family: var(--kd-font-mono);
    font-size: 11px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-accent);
}

/* ============================== INTEL TILE BUTTON RESET ================= */
/* When the same intel-tile pattern is used as a <button> (e.g. for modals),
   strip the native button chrome so the visual matches the <a> form. */
button.kd-intel-tile {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
}
button.kd-intel-tile:focus-visible {
    outline: 2px solid var(--kd-accent, var(--kd-fg));
    outline-offset: 2px;
}