/* ==========================================================================
   Python Bytes homepage (plan 021 redesign)
   Light theme. Tokens + all band styles are scoped to .home, so nothing
   leaks into other pages even if this file gets packed.
   ========================================================================== */

.home {
    /* surfaces - white ground; elevation = soft shadow + hairline border */
    --pb-bg: hsl(0, 0%, 100%);
    --pb-bg-alt: hsl(220, 27%, 96%);
    --pb-surface: hsl(0, 0%, 100%);
    --pb-surface-2: hsl(220, 20%, 93%);
    --pb-hairline: hsla(222, 30%, 15%, 0.10);

    /* text */
    --pb-text: hsl(222, 25%, 14%);
    --pb-text-2: hsl(222, 12%, 30%);
    --pb-text-3: hsl(220, 8%, 44%);

    /* accents - brand orange #f19128 + link blue, nothing else */
    --pb-accent: hsl(30, 88%, 57%);
    --pb-accent-hover: hsl(30, 88%, 64%);
    --pb-on-accent: #fff; /* white on orange, legibility helped by a soft text shadow */
    --pb-accent-text: hsl(27, 90%, 34%);
    --pb-link: hsl(197, 100%, 29%);

    /* shape + elevation */
    --pb-radius-sm: 6px;
    --pb-radius-md: 12px;
    --pb-shadow-md: 0 1px 3px rgba(16, 24, 40, 0.10), 0 4px 12px rgba(16, 24, 40, 0.08);
    --pb-shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.10), 0 12px 32px rgba(16, 24, 40, 0.16);

    color: var(--pb-text-2);
}

.home .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   Bands - restores the a/b rhythm (R1) with real breathing room (R2)
   -------------------------------------------------------------------------- */

.home .pb-band {
    padding: 64px 0;
    background: var(--pb-bg);
}

.home .pb-band-alt {
    background: var(--pb-bg-alt);
}

.home .pb-section-h {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: var(--pb-text);
    text-align: center;
    margin: 0 0 8px;
}

.home .pb-section-h-sm {
    font-size: 24px;
    text-align: left;
}

.home .pb-section-sub {
    font-size: 15px;
    color: var(--pb-text-3);
    text-align: center;
    margin: 0 0 32px;
}

.home .pb-eyebrow {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pb-accent-text);
}

/* --------------------------------------------------------------------------
   Buttons (R5: ghost replaces btn-default; dark text on orange for WCAG)
   -------------------------------------------------------------------------- */

.home .pb-btn-primary {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 16px;
    background: var(--pb-accent);
    color: var(--pb-on-accent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    border: none;
    padding: 12px 20px;
    border-radius: var(--pb-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease;
}

.home .pb-btn-primary:hover,
.home .pb-btn-primary:focus {
    background: var(--pb-accent-hover);
    color: var(--pb-on-accent);
    text-decoration: none;
}

.home .pb-btn-lg {
    font-size: 17px;
    padding: 14px 26px;
}

.home .pb-btn-ghost {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    background: transparent;
    color: var(--pb-text-2);
    border: 1px solid var(--pb-hairline);
    padding: 11px 18px;
    border-radius: var(--pb-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}

.home .pb-btn-ghost:hover,
.home .pb-btn-ghost:focus {
    background: var(--pb-surface-2);
    color: var(--pb-text);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   1 · Hero - kept from production; the logo breathes on white
   -------------------------------------------------------------------------- */

.home .banner-section {
    margin: 40px auto 0;
    text-align: center;
    background: url('/static/img/banner_750.png') no-repeat center center;
    background-size: cover;
    height: 600px;
}

.home .pb-hero-actions {
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
}

.home .pb-hero-actions .container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.home .pb-youtube-red {
    color: #e23b2e;
}

/* --------------------------------------------------------------------------
   2 · Metrics band - naked numbers, no boxes
   -------------------------------------------------------------------------- */

.home .pb-metrics {
    padding: 32px 0;
    border-top: 1px solid var(--pb-hairline);
    border-bottom: 1px solid var(--pb-hairline);
    margin-top: 32px;
}

.home .pb-metrics-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    text-align: center;
}

.home .pb-metric-value {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: var(--pb-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.home .pb-metric-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pb-text-3);
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   3 · Latest episode - chrome-free row, thumbnail on wide displays only
   -------------------------------------------------------------------------- */

.home .pb-latest {
    max-width: 1020px;
    margin: 0 auto;
    display: flex;
    gap: 32px;
    align-items: center;
}

.home .pb-latest-main {
    flex: 1;
    min-width: 0;
}

.home .pb-latest-title {
    font-size: 30px;
    line-height: 1.25;
    margin: 10px 0 18px;
}

.home .pb-latest-title a {
    color: var(--pb-text);
    text-decoration: none;
}

.home .pb-latest-title a:hover {
    color: var(--pb-accent-text);
}

.home .pb-topics {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.home .pb-topics li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-size: 16px;
}

.home .pb-topics li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pb-accent);
}

.home .pb-latest-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.home .pb-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--pb-text-3);
    font-size: 15px;
    text-decoration: none;
}

.home .pb-play:hover {
    color: var(--pb-text);
    text-decoration: none;
}

.home .pb-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pb-accent);
    color: var(--pb-on-accent);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
}

.home .pb-play:hover .pb-play-btn {
    background: var(--pb-accent-hover);
}

.home .pb-play-btn i {
    margin-left: 3px;
}

.home .pb-latest-thumb {
    flex: 0 0 390px;
}

.home .pb-latest-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

@media (max-width: 1020px) {
    .home .pb-latest-thumb {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   4 · Subscribe slice - reuses .subscribe-buttons from site.css, upsized
   -------------------------------------------------------------------------- */

.home .pb-subscribe-slice .subscribe-buttons {
    font-size: 13px;
    margin: 0;
    color: var(--pb-text-2);
}

.home .pb-subscribe-slice .subscribe-buttons a {
    color: var(--pb-text-2);
    margin: 6px 14px;
    border-radius: var(--pb-radius-sm);
    transition: transform 150ms ease, color 150ms ease;
}

.home .pb-subscribe-slice .subscribe-buttons a:hover {
    transform: translateY(-3px);
    color: var(--pb-text);
    text-decoration: none;
}

.home .pb-subscribe-slice .subscribe-buttons img {
    width: 56px;
    border-radius: 12px;
    display: block;
    margin: 0 auto 8px;
}

/* The band heading carries this line; hide the partial's inner copy */
.home .pb-subscribe-slice .subscribe-buttons .subscribe-cta {
    display: none;
}

/* --------------------------------------------------------------------------
   5 · Search - full width, high profile
   -------------------------------------------------------------------------- */

.home .pb-search-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.home .pb-search-form input {
    flex: 1;
    min-width: 220px;
    max-width: 640px;
    height: 56px;
    font-size: 17px;
    padding: 0 16px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-sm);
    color: var(--pb-text);
    font-family: 'Nunito Sans', sans-serif;
}

.home .pb-search-form input::placeholder {
    color: var(--pb-text-3);
}

/* --------------------------------------------------------------------------
   6 · Hosts - 96px of air above, symmetric cards (R10 replaces .host-image)
   -------------------------------------------------------------------------- */

.home .pb-hosts {
    padding-top: 96px;
}

.home .pb-hosts-intro {
    max-width: 640px;
    margin: 0 auto 48px;
    font-size: 18px;
    line-height: 1.7;
}

.home .pb-hosts-intro a {
    color: var(--pb-link);
}

.home .pb-host-cards {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.home .pb-host-card {
    width: 300px;
    text-align: center;
    padding: 32px 24px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    box-shadow: var(--pb-shadow-md);
}

.home .pb-host-card img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--pb-hairline);
}

.home .pb-host-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--pb-text);
    margin: 16px 0 4px;
}

.home .pb-host-role {
    font-size: 15px;
    color: var(--pb-text-2);
    margin-bottom: 8px;
}

.home .pb-host-link {
    font-size: 14px;
    color: var(--pb-link);
}

/* --------------------------------------------------------------------------
   7 · Reviews - quiet cards, roman quotes, clamped
   -------------------------------------------------------------------------- */

.home .pb-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.home .pb-review-card {
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    padding: 24px;
}

.home .pb-review-card h4 {
    font-size: 18px;
    color: var(--pb-text);
    margin: 0 0 8px;
}

.home .pb-review-card blockquote {
    border: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: 17px;
    font-style: normal;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home .pb-review-card footer {
    font-size: 14px;
    color: var(--pb-text-3);
    background: transparent;
    padding: 0; /* landing-page.css pads every <footer> 50px for the page footer */
}

.home .pb-review-links {
    text-align: center;
    font-size: 14px;
    color: var(--pb-text-3);
}

/* --------------------------------------------------------------------------
   8 · Courses - Training's card style with real art
   -------------------------------------------------------------------------- */

.home .pb-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.home .pb-course-card {
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    box-shadow: var(--pb-shadow-md);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    transition: transform 150ms ease;
}

.home .pb-course-card:hover {
    transform: translateY(-3px);
    text-decoration: none;
}

.home .pb-course-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--pb-text);
    /* Reserve two lines so every card's image starts at the same height;
       one-line titles center vertically in the zone. */
    line-height: 1.3;
    min-height: 2.6em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.home .pb-course-card img {
    width: 100%;
    border-radius: 8px;
    display: block;
    /* Training art is consistently 16:9; enforce it so a stray odd-sized
       image can never break the row alignment. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.home .pb-courses-cta {
    text-align: center;
}

/* --------------------------------------------------------------------------
   9 · Technology parade - chrome-free tiles, hover-only surfaces
   -------------------------------------------------------------------------- */

.home .tech-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
}

.home .tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 8px;
    color: var(--pb-text);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
}

.home .tech-item:hover {
    background: var(--pb-surface-2);
    transform: scale(1.04);
    text-decoration: none;
    color: var(--pb-text);
}

.home .tech-logo {
    height: 52px;
    max-width: 140px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   10 · Newsletter + suggest - two columns
   -------------------------------------------------------------------------- */

.home .pb-two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 960px;
    margin: 0 auto;
}

.home .pb-two-up p {
    margin: 0 0 20px;
    font-size: 15.5px;
}

.home .pb-suggest-mail {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    color: var(--pb-link);
}

/* --------------------------------------------------------------------------
   11 · Talk Python cross-promo
   -------------------------------------------------------------------------- */

.home .pb-tp-row {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 880px;
    margin: 0 auto;
}

.home .pb-tp-logo {
    flex: 0 0 220px;
    width: 220px;
    border-radius: var(--pb-radius-md);
    border: 1px solid #999; /* the light art needs an edge on white (plan 021 §11) */
    display: block;
}

.home .pb-tp-copy p {
    font-size: 18px;
    margin: 8px 0 20px;
    max-width: 560px;
}

/* --------------------------------------------------------------------------
   12 · Closing band (replaces old #footer_banner 100px padding)
   -------------------------------------------------------------------------- */

.home .pb-closing {
    padding: 96px 0;
    text-align: center;
}

.home .pb-closing-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.home .pb-browse {
    font-size: 16px;
    color: var(--pb-link);
}

.home .pb-socials {
    display: flex;
    gap: 12px;
}

.home .pb-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--pb-hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-text-2);
    font-size: 16px;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}

.home .pb-social:hover {
    background: var(--pb-surface-2);
    color: var(--pb-text);
    text-decoration: none;
}

.home .pb-social img {
    height: 16px;
    /* Bluesky SVG ships in brand blue; desaturate to match the mono icon set. */
    filter: grayscale(1) brightness(0.55);
}

.home .pb-all-socials {
    font-size: 14px;
    color: var(--pb-text-3);
}

/* --------------------------------------------------------------------------
   Supporting pages: /connect-on-social and /subscribe-options
   -------------------------------------------------------------------------- */

.home .pb-connect,
.home .pb-suboptions {
    margin-top: 75px; /* clear the fixed navbar, same as .intro-header */
    padding-top: 32px;
}

/* Page titles match the site-wide h1 treatment (36px, #555) rather than the
   homepage band headings, so these pages feel like the rest of the site. */
.home .pb-connect .pb-section-h,
.home .pb-suboptions .pb-section-h {
    font-size: 36px;
    color: #555;
}

.home .pb-suboptions .pb-section-h {
    margin-bottom: 40px;
}

.home .pb-connect-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.home .pb-connect-card {
    background: var(--pb-surface);
    border: 1px solid var(--pb-hairline);
    border-radius: var(--pb-radius-md);
    box-shadow: var(--pb-shadow-md);
    padding: 24px 28px;
}

.home .pb-connect-card h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--pb-text);
    margin: 0 0 14px;
}

.home .pb-connect-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home .pb-connect-card li {
    margin: 10px 0;
}

.home .pb-connect-card a {
    color: var(--pb-text-2);
    font-size: 16px;
    text-decoration: none;
}

.home .pb-connect-card a:hover {
    color: var(--pb-link);
}

.home .pb-connect-card i,
.home .pb-connect-card img {
    width: 22px;
    text-align: center;
    margin-right: 8px;
}

.home .pb-connect-card img {
    height: 15px;
    vertical-align: -2px;
}

.home .pb-suboptions .subscribe-buttons {
    font-size: 13px;
    color: var(--pb-text-2);
}

.home .pb-suboptions .subscribe-buttons a {
    color: var(--pb-text-2);
    margin: 6px 14px;
}

.home .pb-suboptions .subscribe-buttons img {
    width: 56px;
    border-radius: 12px;
    display: block;
    margin: 0 auto 8px;
}

.home .pb-suboptions .subscribe-buttons .subscribe-cta {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--pb-text);
    margin-top: 16px;
}

.home .pb-suboptions-copy {
    max-width: 640px;
    margin: 40px auto 0;
    font-size: 17px;
    line-height: 1.7;
}

.home .pb-suboptions-copy a {
    color: var(--pb-link);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .home .pb-band {
        padding: 48px 0;
    }

    .home .pb-hosts {
        padding-top: 64px;
    }

    .home .pb-closing {
        padding: 64px 0;
    }

    .home .banner-section {
        height: 275px;
    }

    .home .pb-section-h {
        font-size: 24px;
    }

    .home .pb-latest-title {
        font-size: 24px;
    }

    .home .pb-metric-value {
        font-size: 24px;
    }

    .home .pb-metrics-row {
        gap: 24px;
    }

    .home .pb-two-up {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .home .pb-tp-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home .pb-btn-primary,
    .home .pb-btn-ghost,
    .home .tech-item,
    .home .pb-course-card,
    .home .pb-social,
    .home .pb-subscribe-slice .subscribe-buttons a {
        transition: none;
    }
}