/* Metrics Bar */
.metrics-bar {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 2rem 1rem;
    text-align: center;
    border-bottom: 2px solid #3498db;
}

.metrics-bar .columns {
    justify-content: center;
    gap: 2rem;
}

.metrics-bar .metric {
    text-align: center;
    padding: 0 2rem;
}

.metrics-bar .metric-value {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffd700;
    line-height: 1.1;
}

.metrics-bar .metric-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

@media screen and (max-width: 768px) {
    .metrics-bar .metric {
        padding: 0 1rem;
    }

    .metrics-bar .metric-value {
        font-size: 1.75rem;
    }

    .metrics-bar .metric-label {
        font-size: 0.8rem;
    }

    .metrics-bar .columns {
        gap: 0.5rem;
    }
}

/* Get Notified Section */
.get-notified {
    padding: 3rem 1rem;
}

.get-notified .section-heading {
    margin-bottom: 2rem;
}

.notify-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notify-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.notify-icon {
    color: #ffd700;
    margin-bottom: 1rem;
}

.notify-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
}

.notify-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .notify-card {
        margin-bottom: 1.5rem;
    }
}

/* Training Section */
.training-section {
    padding: 3rem 1rem;
}

.training-intro {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.featured-courses {
    margin-bottom: 2rem;
}

.featured-course-card {
    display: block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.featured-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.featured-course-card .course-thumbnail {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.featured-course-card .course-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #ddd;
    line-height: 1.3;
}

/* Technology Parade Section */
.technology-parade {
    padding: 3rem 1rem;
}

.technology-parade .section-heading {
    margin-bottom: 2rem;
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-width: 120px;
}

.tech-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

.tech-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.tech-name {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

@media screen and (max-width: 768px) {
    .tech-grid {
        gap: 1rem;
    }

    .tech-item {
        min-width: 100px;
        padding: 0.75rem;
    }

    .tech-logo {
        width: 48px;
        height: 48px;
    }
}

/* Teams Section */
.teams-section {
    padding: 3rem 1rem;
}

.teams-section .lead {
    margin-bottom: 1.5rem;
}

.teams-icon {
    color: rgba(255, 215, 0, 0.7);
}

/* Success Stories Section */
.success-stories {
    padding: 3rem 1rem;
}

.success-story-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.success-story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.success-story-category {
    display: inline-block;
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.success-story-quote {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 1rem;
}

.success-story-attribution {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .success-story-card {
        margin-bottom: 1.5rem;
    }
}

/* Book Section */
.book-section {
    padding: 3rem 1rem;
}

.book-cover-placeholder {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

@media screen and (max-width: 768px) {
    .book-cover-placeholder {
        min-height: 200px;
        margin-bottom: 2rem;
    }
}

/* Search Discovery Section */
.search-discovery {
    padding: 3rem 1rem;
}

.search-discovery .lead {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* AI Tools Section (MCP + CLI) */
.ai-tools-section {
    padding: 3rem 1rem;
}

.ai-tools-section .section-heading {
    margin-bottom: 1rem;
}

.ai-tools-intro {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
    margin: 0 auto 2rem;
}

.ai-tool-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.ai-tool-icon {
    color: #ffd700;
    margin-bottom: 1rem;
    text-align: center;
}

.ai-tool-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
    text-align: center;
}

.ai-tool-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.ai-tool-text code {
    background: rgba(0, 0, 0, 0.35);
    color: #5BC0DE;
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

.ai-tool-card .ai-tool-code {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.ai-tool-card .ai-tool-code code {
    background: transparent;
    color: #1FC75F;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre;
    padding: 0;
}

.ai-tool-cta {
    margin-top: auto;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .ai-tool-card {
        margin-bottom: 1.5rem;
    }

    .ai-tool-card .ai-tool-code code {
        font-size: 0.8rem;
    }
}

/* Final CTA Section */
.final-cta {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 4rem 1rem;
    text-align: center;
}

.final-cta-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1.5rem;
}

.final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.final-cta-buttons .button.is-outlined {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.final-cta-buttons .button.is-outlined:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

@media screen and (max-width: 768px) {
    .final-cta-heading {
        font-size: 1.5rem;
    }

    .final-cta-buttons .button {
        width: 100%;
    }
}

/* Latest Episode Section - Enhanced */
.latest-episode {
    padding: 3rem 1rem;
}

.latest-episode .section-heading {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.latest-episode .lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

/* Featured Guest Container - Default (1-2 guests) */
.featured-guest-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
}

.featured-guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.featured-guest-image {
    width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: 16px;
    border: 4px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.featured-guest-image:hover {
    transform: scale(1.03);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.featured-guest-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

/* Multi-Guest Grid Layout (2+ guests) */
.featured-guest-container.multiple-guests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    padding: 2rem 1rem;
    max-width: 900px;
    margin: 0 auto;
    justify-items: center;
}

.featured-guest-container.multiple-guests .featured-guest-image {
    width: 160px;
    height: 160px;
    border-width: 3px;
    border-radius: 12px;
}

.featured-guest-container.multiple-guests .featured-guest-name {
    font-size: 1rem;
}

.featured-guest-container.multiple-guests .featured-guest {
    gap: 0.75rem;
}

/* Tablet adjustments */
@media screen and (max-width: 768px) {
    .featured-guest-image {
        width: 220px;
        height: 220px;
    }
    
    .featured-guest-name {
        font-size: 1.1rem;
    }
    
    .featured-guest-container.multiple-guests {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 1.5rem;
        max-width: 700px;
    }
    
    .featured-guest-container.multiple-guests .featured-guest-image {
        width: 130px;
        height: 130px;
    }
    
    .featured-guest-container.multiple-guests .featured-guest-name {
        font-size: 0.9rem;
    }
}

/* Mobile adjustments */
@media screen and (max-width: 480px) {
    .featured-guest-image {
        width: 180px;
        height: 180px;
    }
    
    .featured-guest-container.multiple-guests {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 1.25rem;
        padding: 1.5rem 1rem;
    }
    
    .featured-guest-container.multiple-guests .featured-guest-image {
        width: 110px;
        height: 110px;
    }
    
    .featured-guest-container.multiple-guests .featured-guest-name {
        font-size: 0.85rem;
    }
}

/* Upcoming Episodes - Enhanced */
.upcoming-episodes {
    padding: 1rem 0;
}

.upcoming-episodes .section-heading {
    margin-bottom: 1.5rem;
}

.upcoming-episode {
    padding: 1.25rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.upcoming-episode:last-child {
    border-bottom: none;
}

.upcoming-episode .guest {
    float: none;
    text-align: left;
    padding-left: 0.5rem;
}

.upcoming-episode .guest-column {
    padding-left: 0;
}

.upcoming-episode .guest img {
    height: 64px;
    width: 64px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    margin-bottom: 0.5rem;
}

.upcoming-episode .guest .name {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.upcoming-episode .guest .and-then {
    font-family: 'Nunito Sans', sans-serif;
    color: #ffd700;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.25rem;
}

.upcoming-episode .episode-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

.upcoming-episode a {
    color: white;
}

.episode-desc-short,
.upcoming-episode a {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.episode-desc-short a.light-access-link {
    color: #5BC0DE;
}

.upcoming-episode .upcoming-details {
    margin-top: 0;
}

/* Legacy banner styles - now using .connect-banner */

#global-sponsor-message {
    margin-bottom: 0px;
}

.course-img img {
    padding: 5px;
    border-radius: 10px;
}

.course-img {
    font-size: 18px;
    text-align: center;
    display: inline-block;
    margin: 0 10px;
}

/* Reviews Section - Enhanced */
.reviews {
    padding: 3rem 1rem;
}

.reviews .section-heading {
    margin-bottom: 2rem;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.review-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.review-card .review-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

.review-card .review-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 1rem;
    border-left: 3px solid #1FC75F;
    padding-left: 28px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.review-card .review-attribution {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.reviews-cta {
    text-align: center;
    margin-top: 2rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.reviews-cta a {
    color: #5BC0DE;
}

.reviews-cta a:hover {
    color: #ffd700;
}

/* Python Bytes Section - Enhanced */
.pythonbytes-section {
    padding: 3rem 1rem;
}

.pythonbytes-card {
    padding: 2rem;
}

.pythonbytes-logo {
    max-width: 250px;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.pythonbytes-logo:hover {
    transform: scale(1.02);
}

.pythonbytes-content .section-heading {
    margin-bottom: 1rem;
}

.pythonbytes-content .lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

/* About Host Section - Enhanced */
.about-host-section {
    padding: 3rem 1rem;
}

.about-host-card {
    padding: 2rem;
}

.about-host-card .section-heading {
    margin-bottom: 1rem;
}

.about-host-card .lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.host-profile {
    text-align: center;
}

.host-profile .host-image {
    max-width: 280px;
    border-radius: 12px;
    border: 3px solid rgba(255, 215, 0, 0.3);
    margin-bottom: 1rem;
}

.host-profile .host-name-caption {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

.host-profile .host-title {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.host-profile .host-social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.host-profile .host-social-links a {
    color: #ffd700;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.host-profile .host-social-links a:hover {
    color: #fff;
}

/* Suggest Section - Enhanced */
.suggest-section {
    padding: 3rem 1rem;
}

.suggest-card {
    padding: 2rem;
}

.suggest-card .section-heading {
    margin-bottom: 1rem;
}

.suggest-card .lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.suggest-card .suggest-cta {
    text-align: center;
}

.suggest-card .suggest-cta .button {
    font-size: 1.1rem;
}

.suggest-image {
    max-width: 200px;
    border-radius: 12px;
    opacity: 0.9;
}

/* Connect Banner - Enhanced */
.connect-banner {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 3rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.connect-banner .connect-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffd700;
    margin-bottom: 1rem;
    text-align: center;
}

.connect-banner .connect-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.connect-banner .connect-buttons .button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.connect-banner .connect-buttons .button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.connect-banner .connect-buttons .button i {
    margin-right: 0.5rem;
}

@media screen and (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .pythonbytes-logo {
        max-width: 200px;
        margin-bottom: 1.5rem;
    }

    .host-profile .host-image {
        max-width: 200px;
    }

    .suggest-image {
        max-width: 150px;
        margin-bottom: 1.5rem;
    }
}



/* ==========================================================================
   HERO CTA ROW - home page only.

   home.css is injected through the additional_css slot (index.pt), so it
   loads after bulma-overrides.css, landing-page.css and site.css. Every
   selector below is .home-page-prefixed, so it wins on both order and
   specificity.

   The hero anchors deliberately do NOT carry Bulma's .button class. That is
   what keeps this whole block free of !important: bulma-overrides.css forces
   colours on .button.is-* (lines 21-75), kills elevation with
   .button { box-shadow: none !important } (line 713) and hijacks :focus
   (line 717). None of those selectors match .intro-cta, so these rules apply
   cleanly and nothing else on the site is affected.
   ========================================================================== */

/* Scrim. hero.webp runs from dark editor chrome on the left to bright
   aluminium on the right directly behind the button row, so the buttons had
   no stable ground. This also stops the design depending on the photo. */
.home-page .intro-header {
    background-image:
        linear-gradient(180deg,
            rgba(8, 12, 18, 0.60) 0%,
            rgba(8, 12, 18, 0.30) 32%,
            rgba(8, 12, 18, 0.78) 100%),
        url('../img/hero.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-page .intro-social-buttons {
    gap: 1rem;
    margin-top: 2.5rem;
}

/* Shared shape and type. These anchors carry no .button class, so the base
   affordances Bulma would normally supply are declared here. */
.home-page .intro-social-buttons .intro-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0.875rem 1.375rem;          /* 14px 22px */
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-family: 'Outfit', 'Work Sans', sans-serif;
    font-size: 0.9375rem;                /* 15px */
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.32);
    transition: background-color 120ms ease, border-color 120ms ease,
                transform 120ms ease, box-shadow 120ms ease;
}

/* .network-name is a leftover from the Start Bootstrap landing template this
   page was built from, where it labelled social-network buttons. Its
   12px/400/uppercase is label styling, not CTA styling. Defined twice:
   landing-page.css:89 and bulma-overrides.css:562. */
.home-page .intro-social-buttons .intro-cta .network-name {
    margin-left: 0;
    text-transform: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
}

/* Duotone's secondary layer defaults to 0.4 opacity, which reads half-erased
   on a saturated fill. 0.65 keeps the two-tone house style legible at 15px. */
.home-page .intro-social-buttons .intro-cta i {
    --fa-secondary-opacity: 0.65;
    font-size: 1em;
    line-height: 1;
}

/* Primary - listen. The brand accent, absent from this hero until now.
   #0a0a0a on #F0DB4F = 14.09:1. */
.home-page .intro-social-buttons .intro-cta-primary {
    background-color: var(--tp-yellow);
    border-color: rgba(10, 10, 10, 0.25);   /* holds the 3:1 non-text edge (WCAG 1.4.11)
                                               against the light regions of hero.webp */
    color: var(--tp-ink);
}

.home-page .intro-social-buttons .intro-cta-primary:hover {
    background-color: var(--tp-yellow-hover);
    border-color: rgba(10, 10, 10, 0.4);
    color: var(--tp-ink);
}

/* Commercial - training. Matches the in-page Courses button at index.pt:335,
   which has always been is-primary navy. White on #286090 = 6.63:1; the old
   is-danger #e74c3c was 3.82:1 and failed AA. */
.home-page .intro-social-buttons .intro-cta-training {
    background-color: var(--tp-navy);
    border-color: var(--tp-navy);
    color: #ffffff;
}

.home-page .intro-social-buttons .intro-cta-training:hover {
    background-color: var(--tp-navy-hover);
    border-color: var(--tp-navy-hover);
    color: #ffffff;
}

/* Secondary glass. Opacity chosen so the worst case - composited over a pure
   white region of the photo - still passes AA: white on the result = 7.85:1. */
.home-page .intro-social-buttons .intro-cta-secondary {
    background-color: rgba(10, 10, 10, 0.72);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .home-page .intro-social-buttons .intro-cta-secondary {
        background-color: rgba(10, 10, 10, 0.62);   /* worst case 5.43:1 */
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        backdrop-filter: blur(8px) saturate(120%);
    }
}

.home-page .intro-social-buttons .intro-cta-secondary:hover {
    background-color: rgba(10, 10, 10, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
    color: #ffffff;
}

/* States. The sitewide rule at bulma-overrides.css:717 binds a 25%-alpha green
   glow to :focus, which fires on mouse click and lands near 2.2:1 over the
   photo. These anchors opt out of it; this is a real focus-visible ring with a
   dark halo so it reads on both the bright and dark halves of the image. */
.home-page .intro-social-buttons .intro-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30), 0 10px 22px rgba(0, 0, 0, 0.38);
}

.home-page .intro-social-buttons .intro-cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

.home-page .intro-social-buttons .intro-cta:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .home-page .intro-social-buttons .intro-cta {
        transition: none;
    }

    .home-page .intro-social-buttons .intro-cta:hover {
        transform: none;
    }
}

/* Mobile: explicit 2x2 so the row cannot wrap 3+1. The two lead actions span
   full width; the utility pair shares the bottom row. */
@media screen and (max-width: 768px) {
    .home-page .intro-social-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }

    .home-page .intro-social-buttons .intro-cta-primary,
    .home-page .intro-social-buttons .intro-cta-training {
        grid-column: 1 / -1;
    }

    .home-page .intro-social-buttons .intro-cta {
        width: 100%;
        font-size: 0.875rem;                 /* 14px */
        padding: 0.8125rem 1rem;
    }
}