/* ── Personal site editorial layout vocabulary (Issue #67) ─────────
   Site-wide (not homepage-only) - loaded on every public page via
   templates/base.html's `{% elif site.key == 'personal' %}` branch,
   the same inclusion point personal_website/chrome.css already uses,
   because these patterns are reused across the homepage, the standalone
   Projects/Articles/Work With Me pages, and the Mentorship detail page.

   Every rule here builds on existing design-system tokens only
   (--color-*, --space-*, --type-*, --radius-*, --shadow-card) - no new
   colors. Per Issue #67's own direction, "soft blush" reuses the
   existing --color-primary-light token and "deep charcoal" reuses the
   existing --color-footer-bg/-text tokens rather than inventing
   near-duplicate ones.

   None of this touches .card/.card-grid/.cta-block/.feature-spotlight/
   .service-item (shared/design-system/components/cards.css) or anything
   under apps/*/templates - those stay exactly as they are for
   website-studio.dev and any personal page this issue doesn't redesign.
*/

/* ── Utility: the one new surface concept, reused wherever a section
   wants a red-derived tint instead of a bordered white card. ────── */
.surface-blush {
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

/* ── Flagship / secondary project showcase (Projects page + homepage
   Featured Projects) - replaces the equal .card.card--project grid.
   Project order is dynamic (queryset order, no ranking field) and may
   change over time, so neither treatment carries an ordinal numeral that
   would imply a fixed sequence - the title itself is the primary visual
   anchor for both. A surfaced/boxed treatment for the flagship, a plain
   single-column, unboxed presentation for everything after it - no card
   border on either. ───────────────────────────────────────────────── */
.showcase-project {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

@media (min-width: 641px) {
    .showcase-project {
        padding: var(--space-8);
    }
}

.showcase-project-body h3 {
    font-size: var(--type-heading-xl-size);
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
}

.showcase-project-summary {
    color: var(--color-text-muted);
    font-size: var(--type-body-lg-size);
    line-height: var(--type-body-lg-line-height);
    max-width: 60ch;
    margin-bottom: var(--space-4);
}

/* Lighter secondary presentation - no background, smaller heading.
   Several of these can follow one flagship. */
.showcase-project--secondary {
    background: none;
    padding: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
}

.showcase-project--secondary .showcase-project-body h3 {
    font-size: var(--type-heading-l-size);
    margin-top: 0;
}

/* ── Editorial article presentation (homepage Latest Article +
   Articles index) - publishing typography, not a bordered card. ──── */
.article-editorial {
    padding-bottom: var(--space-2);
}

.article-editorial + .article-editorial {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.article-editorial-title {
    font-size: var(--type-heading-xl-size);
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

.article-editorial-byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--type-small-size);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    letter-spacing: 0.01em;
}

.article-editorial-byline span + span {
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-border);
}

.article-editorial-summary {
    color: var(--color-text-muted);
    font-size: var(--type-body-lg-size);
    line-height: var(--type-body-lg-line-height);
    max-width: 60ch;
    margin-bottom: var(--space-3);
}

/* ── Explore panel (Topics/Series/Formats) - a plain link list, not a
   card - sits beside the article listing on the homepage and the
   standalone Articles index. ─────────────────────────────────────── */
.explore-panel-title {
    font-family: var(--font-mono);
    font-size: var(--type-caption-size);
    font-weight: var(--type-label-weight);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-4);
}

.explore-panel-group + .explore-panel-group {
    margin-top: var(--space-5);
}

.explore-panel-label {
    display: block;
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.explore-panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.explore-panel-list a {
    color: var(--color-heading);
}

.explore-panel-list a:hover {
    color: var(--color-interactive);
}

/* ── Work With Me: featured product + lightweight editorial grid -
   replaces both the grey .services parent wrapping identical white
   .service-item cards AND the earlier numbered 01/02/03 treatment.
   Mentorship, Consulting, Architecture Review, Speaking and Collaboration
   are parallel, unordered offerings - nothing here implies rank or
   sequence (no index numerals). Mentorship is simply the one featured
   product, called out via .surface-blush, not position "01". ────────── */
.service-tier {
    margin-bottom: var(--space-8);
}

.service-tier--primary .service-tier-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--type-small-size);
    color: var(--color-text-muted);
    margin: var(--space-4) 0 var(--space-6);
}

.service-tier--primary .service-tier-meta span + span {
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
}

/* A responsive 2-column editorial grid with whitespace and a subtle
   divider between columns/rows - not cards. */
.service-tiers-secondary {
    display: grid;
    gap: var(--space-6) var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.service-tier--secondary {
    margin-bottom: 0;
}

.service-tier--secondary h3,
.service-tier--secondary h4 {
    margin-top: 0;
}

.service-tier--secondary p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

/* ── Booking CTA (Issue #62) - reuses the same green already used for
   Articles' eyebrow (.eyebrow--editorial, --accent-editorial-*) rather
   than inventing a new color, per the issue's explicit constraint. A
   third button variant, scoped to this product's own stylesheet only
   (not shared/design-system/components/buttons.css, whose own comment
   says "do not add a third without a concrete cross-workspace need" -
   this need is personal-site-specific, not cross-workspace, so it does
   not belong in the shared vocabulary Website Studio also renders
   through). Never applied to Website Studio's own pages. */
.btn-accent-editorial {
    display: inline-block;
    font: var(--type-label-weight) var(--type-small-size) / var(--type-small-line-height) var(--font-sans);
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    background: var(--accent-editorial-strong);
    color: #fff;
    border: 1px solid var(--accent-editorial-strong);
}

.btn-accent-editorial:hover {
    background: var(--accent-editorial-fg);
    border-color: var(--accent-editorial-fg);
    color: #fff;
    text-decoration: none;
}

/* A disabled booking button reads as "not ready yet," not "pale green" -
   green stays reserved for an active/confirmable booking state, so a
   disabled button switches to the same neutral surface/border/text the
   booking form's own resting inputs use, rather than fading the green. */
.btn-accent-editorial:disabled {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

/* Same shape as .surface-blush, green-tinted via the same accent-editorial
   tokens as .btn-accent-editorial above, for the Contact page's booking
   entry point (issue: "should visually belong to the personal website
   rather than looking like an embedded third-party scheduler"). */
.surface-editorial {
    background: var(--accent-editorial-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.contact-options {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 641px) {
    .contact-options {
        grid-template-columns: 1.3fr 1fr;
        align-items: start;
    }
}

/* ── Booking metadata (duration/timezone) - understated facts, the
   same visual weight as .service-tier-meta but not entangled with the
   service-tier component (this line stands alone under the page's own
   <header>, not inside a .service-tier--primary card). ─────────────── */
.booking-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--type-small-size);
    color: var(--color-text-muted);
    margin: var(--space-4) 0 0;
}

.booking-meta span + span {
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
}

/* ── Booking flow (Issue #62, redesigned into progressive selection) -
   personal-site presentation of apps.scheduling.views.BookingView
   (products/personal_website/templates/personal_website/scheduling/
   book.html). Calendar + details together read as one composed surface
   (.booking-surface) rather than two separate cards - a single
   background/border/padding, with a hairline divider between the two
   columns standing in for a second card. Calendar + details side by
   side on desktop, stacked on mobile - a date is chosen via a real link
   (?date=...), never a client-only toggle, so the whole flow works with
   JavaScript disabled; `.is-selected` on a time slot is applied by the
   template's own small script on change (the `:has()` rule below is a
   harmless progressive enhancement for browsers new enough to skip the
   script entirely). */
.booking-surface {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-top: var(--space-8);
}

.booking-layout {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: minmax(0, 20rem) minmax(0, 24rem);
    align-items: start;
}

.booking-details-panel {
    min-width: 0;
}

@media (min-width: 801px) {
    .booking-details-panel {
        padding-left: var(--space-8);
        /* Softer than a full-strength --color-border hairline - a
           whisper of separation between the two columns, not a second
           card edge, now that .booking-surface itself is white. */
        border-left: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    }
}

.booking-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.booking-calendar-month {
    font-size: var(--type-body-lg-size);
    font-weight: var(--type-label-weight);
    color: var(--color-heading);
}

.booking-calendar-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--type-body-lg-size);
    line-height: 1;
    color: var(--color-heading);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.booking-calendar-nav-link:hover {
    background: var(--accent-editorial-bg);
    border-color: var(--accent-editorial-strong);
    color: var(--accent-editorial-fg);
    text-decoration: none;
}

.booking-calendar-nav-link.is-disabled {
    border-color: var(--color-border);
    color: var(--color-border);
}

.booking-calendar-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.booking-calendar-grid th {
    font-family: var(--font-mono);
    font-size: var(--type-caption-size);
    font-weight: var(--type-label-weight);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: var(--space-2);
}

.booking-calendar-grid td {
    text-align: center;
    padding: 2px;
}

.booking-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 50%;
    font-size: var(--type-small-size);
    color: var(--color-heading);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

a.booking-calendar-day:hover {
    background: var(--accent-editorial-bg);
    text-decoration: none;
}

.booking-calendar-day.is-today {
    font-weight: var(--type-label-weight);
}

.booking-calendar-day.is-selected {
    background: var(--accent-editorial-strong);
    color: #fff;
}

.booking-calendar-day.is-disabled {
    color: var(--color-text-muted);
    opacity: 0.45;
}

.booking-calendar-day.is-outside {
    color: var(--color-text-muted);
    opacity: 0.3;
}

.booking-slots-panel {
    min-height: 5.5rem;
}

.booking-slots-panel .eyebrow {
    margin-bottom: var(--space-4);
}

.booking-slot-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.booking-slot {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--type-small-size);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.booking-slot:hover {
    border-color: var(--accent-editorial-strong);
}

.booking-slot input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.booking-slot.is-selected,
.booking-slot:has(input:checked) {
    border-color: var(--accent-editorial-strong);
    background: var(--accent-editorial-bg);
    color: var(--accent-editorial-fg);
}

.booking-summary {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}

.booking-form {
    max-width: 420px;
}

/* Booking form inputs read too utilitarian with the shared design
   system's default grey-filled surface (--color-surface-muted, used
   site-wide including Website Studio's own forms) - scoped to this
   product's own booking form only, not a change to shared/design-system
   (which stays as-is for Studio and every other form on the site). */
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form textarea {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
}

.booking-form input[type="text"]:focus-visible,
.booking-form input[type="email"]:focus-visible,
.booking-form textarea:focus-visible {
    outline: none;
    background: var(--color-background);
    border-color: var(--accent-editorial-strong);
    box-shadow: 0 0 0 3px var(--accent-editorial-bg);
}

/* ── Booking confirmation summary - a plain definition list, not a
   table/card grid, matching this product's general preference for
   typography over componentry for small structured facts. */
.booking-confirmation-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-5);
}

.booking-confirmation-summary dt {
    font-family: var(--font-mono);
    font-size: var(--type-small-size);
    color: var(--color-text-muted);
}

.booking-confirmation-summary dd {
    margin: 0;
    color: var(--color-heading);
}

@media (max-width: 800px) {
    .booking-surface {
        padding: var(--space-6);
    }

    .booking-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Learning journey timeline (Mentorship detail page) - a CSS
   treatment applied to the existing `approach` markdown's own H3
   structure via counters, not new copy: a numbered vertical rail
   connecting each real subsection heading. ───────────────────────── */
.journey-timeline {
    counter-reset: journey-step;
    position: relative;
    padding-left: var(--space-8);
}

.journey-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0.5em;
    bottom: 0.5em;
    width: 2px;
    background: var(--color-border);
}

.journey-timeline h3 {
    counter-increment: journey-step;
    position: relative;
}

.journey-timeline h3::before {
    content: counter(journey-step, decimal-leading-zero);
    position: absolute;
    left: calc(-1 * var(--space-8));
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--type-caption-size);
    font-weight: 700;
}

/* ── Closing CTA - a deliberate charcoal transition into the dark
   footer, reusing the footer's own color tokens (not a new dark
   surface) and its own full-bleed-via-inner-wrapper technique. ───── */
/* .main-content (page.css) centers/pads every page's content block, so
   a section rendered inside {% block content %} can't reach the true
   viewport edge the way .site-footer does (a sibling of .main-content,
   not nested inside it) without breaking out of that constraint itself -
   the standard "full-bleed inside a constrained parent" technique. */
.cta-closing {
    background: var(--color-footer-bg);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: var(--space-10) var(--space-5);
    text-align: center;
}

.cta-closing-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.cta-closing h2 {
    color: var(--color-footer-text);
    margin-bottom: var(--space-3);
}

.cta-closing p {
    color: var(--color-footer-text-muted);
    margin-bottom: var(--space-6);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .showcase-project {
        padding: var(--space-5);
    }

    .surface-blush {
        padding: var(--space-5);
    }
}