/* About FTC page */
.about-hero {
    background: radial-gradient(ellipse at 78% 22%, #123f4d, transparent 58%)
}

.about-hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(32px, 7vw, 100px)
}

.about-hero-logo {
    display: block;
    width: clamp(190px, 22vw, 260px);
    height: auto;
    padding: 8px;
    background: #fff;
    border-radius: 4px
}

.about-grid,
.season-grid,
.scoring-grid,
.feature-grid,
.match-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 36px
}

.info-card,
.feature-box,
.phase-box {
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid #294d57;
    background: linear-gradient(180deg, rgba(16, 28, 34, .9), rgba(8, 15, 20, .96));
    box-shadow: inset 0 0 0 1px rgba(73, 242, 242, .04)
}

.feature-box h3,
.phase-box h3 {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.8vw, 30px);
    font-family: 'Barlow Condensed', Impact, sans-serif;
    line-height: 1.1;
    letter-spacing: .5px;
    text-transform: uppercase
}

.feature-box p,
.phase-box p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0
}

.phase-box {
    min-height: 230px
}

.auto-phase {
    border-color: #7b62d3
}

.teleop-phase {
    border-color: #2d9b7e
}

.endgame-phase {
    border-color: #daa937
}

.score-table-wrap {
    margin-top: 30px;
    overflow-x: auto;
    border: 1px solid #2d5866;
    background: #0b171f
}

.score-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    color: #ebf8ff
}

.score-table th,
.score-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #264552;
    text-align: left;
    vertical-align: top
}

.score-table th {
    background: #0f2a33;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px
}

.score-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .02)
}

.score-table td {
    color: var(--muted)
}

.score-table td:first-child {
    color: #effdff
}

.info-card h3 {
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.05;
    margin: 0 0 14px;
    font-family: 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase
}

.info-card p {
    color: var(--muted);
    line-height: 1.8;
    margin: 0
}

.panel-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--cyan);
    margin-bottom: 12px;
    text-transform: uppercase
}

.video-panel {
    margin-top: 26px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid #2b5865;
    background: linear-gradient(145deg, #0d1d25, #0a1217)
}

.resource-link {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 26px 0 0;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid #294d57;
    background: linear-gradient(140deg, #102630, #09131b);
    transition: .2s
}

.resource-link:hover {
    border-color: var(--cyan);
    transform: translateY(-2px);
    box-shadow: 0 0 25px #3cf0f022
}

.resource-link .panel-label {
    margin-bottom: 0
}

.resource-link-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1
}

.resource-link-text strong {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: clamp(20px, 2.4vw, 26px);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff
}

.resource-link-text span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5
}

.resource-link-arrow {
    font-size: 26px;
    color: var(--cyan);
    transition: transform .2s
}

.resource-link:hover .resource-link-arrow {
    transform: translateX(4px)
}

@media(max-width:600px) {
    .resource-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
}

.video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #01080c;
    border: 1px solid rgba(73, 242, 242, .18)
}

.video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

@media(max-width:900px) {
    .about-grid,
    .season-grid,
    .scoring-grid,
    .feature-grid,
    .match-flow {
        grid-template-columns: 1fr
    }
}

@media(max-width:800px) {
    .about-hero .wrap {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .about-hero-logo {
        justify-self: center;
        width: min(230px, 70vw)
    }
}