/*
 * tnt-resources.css
 * TNT | TechNoviceTools | Resources page
 * Used by: resources.html (root)
 * Loads after: tnt-base-styles.css
 *
 * Covers: hero config, legacy archive bar, resource accordion,
 *         resource card grid inside each accordion section.
 */


/* ═══════════════════════════════════════════════════════════════════
   HERO — Resources page
   Background: images/robotLegosWithHuman.jpeg
   The robot-and-legos image captures exactly what resources are for:
   handing a builder the right piece at the right time.
═══════════════════════════════════════════════════════════════════ */
#hero {
    min-height: 44vh;
    background:
        linear-gradient(135deg, rgba(8,12,24,0.60) 0%, rgba(20,26,46,0.40) 100%),
        url('../images/robotLegosWithHuman.jpeg') center center / cover no-repeat;
    padding: 4.5rem 1rem;
}

.hero-content { max-width: 720px; }

/* At narrow widths cover stays solid — no offset to correct */
@media (max-width: 760px) {
    #hero { background-position: center center; }
}


/* ═══════════════════════════════════════════════════════════════════
   RESOURCES SECTION  (#resourcesSection)
   Light warm background — same tone as intro sections elsewhere.
═══════════════════════════════════════════════════════════════════ */
#resourcesSection {
    background: #f4f5f7;
    padding: 5rem 0;
}

#resourcesSection .section-title { color: var(--tnt-dark); }

#resourcesSection p.intro-copy {
    font-size: 0.96rem;
    color: #444;
    line-height: 1.72;
    max-width: 680px;
}


/* ── Legacy archive bar ──────────────────────────────────────────
   Identical pattern to the news page: dark pill linking to the
   archived pre-2026 resources in formerPages/.                     */
.resources-legacy-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--tnt-dark);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 1.25rem 1.75rem;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}

.resources-legacy-bar-icon {
    font-size: 1.9rem;
    color: var(--tnt-amber);
    flex-shrink: 0;
}

.resources-legacy-bar-body {
    flex: 1;
    min-width: 180px;
}

.resources-legacy-bar-body h3 {
    font-family: var(--boogaloo);
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.resources-legacy-bar-body p {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.62);
    margin: 0;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════
   RESOURCES ACCORDION
   Same visual pattern as the news accordion: clean, borderless,
   collapsible sections — one per resource category.
   Each section's body contains a responsive card grid.
═══════════════════════════════════════════════════════════════════ */
.resources-accordion {
    --bs-accordion-border-color:         #e2e4e8;
    --bs-accordion-bg:                   transparent;
    --bs-accordion-btn-bg:               transparent;
    --bs-accordion-btn-color:            var(--tnt-dark);
    --bs-accordion-active-bg:            transparent;
    --bs-accordion-active-color:         var(--tnt-red);
    --bs-accordion-btn-focus-box-shadow: none;
}

.resources-accordion .accordion-item {
    border-left:  none;
    border-right: none;
    border-top:   none;
    background:   transparent;
}

.resources-accordion .accordion-item:last-child {
    border-bottom: none;
}

.resources-accordion .accordion-button {
    font-family: var(--boogaloo);
    font-size:   1.15rem;
    padding:     0.9rem 0;
    gap:         0.75rem;
    display:     flex;
    align-items: center;
    box-shadow:  none;
}

.resources-accordion .accordion-button::after {
    margin-left: auto;
    flex-shrink: 0;
}

.resources-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.resources-accordion .accordion-body {
    padding:     0.5rem 0 1.5rem 0;
    border-top:  1px solid #e8e8e8;
}


/* ── Category icon pill ──────────────────────────────────────────
   Colored circle before the category title in the accordion button. */
.res-cat-icon {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    width:        34px;
    height:       34px;
    border-radius: 50%;
    font-size:    1rem;
    flex-shrink:  0;
}


/* ── Resource card grid ──────────────────────────────────────────
   Responsive auto-fill grid inside each accordion body.
   Two columns on medium screens, one on mobile.                    */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    padding-top: 0.85rem;
}

/* Each individual resource: icon | name + description, all clickable */
.resource-card {
    display:         flex;
    align-items:     flex-start;
    gap:             0.8rem;
    padding:         0.85rem 1rem;
    border-radius:   10px;
    background:      #fff;
    border:          1.5px solid #e2e4e8;
    text-decoration: none;
    transition:      border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.resource-card:hover {
    border-color: var(--tnt-red);
    box-shadow:   0 4px 14px rgba(216,24,39,0.1);
    transform:    translateY(-2px);
    text-decoration: none;
}

/* Icon circle on the left of each card */
.resource-card-icon {
    width:        38px;
    height:       38px;
    border-radius: 8px;
    display:      flex;
    align-items:  center;
    justify-content: center;
    font-size:    1.1rem;
    flex-shrink:  0;
    margin-top:   2px;
}

/* Text block: name + description */
.resource-card-body { flex: 1; min-width: 0; }

.resource-card-name {
    font-family:  var(--boogaloo);
    font-size:    1rem;
    color:        var(--tnt-dark);
    line-height:  1.2;
    margin-bottom: 0.2rem;
}

.resource-card-desc {
    font-size:   0.82rem;
    color:       #666;
    line-height: 1.5;
    margin:      0;
}

/* External link arrow — subtle right-arrow on hover */
.resource-card-arrow {
    font-size:   0.75rem;
    color:       #bbb;
    flex-shrink: 0;
    align-self:  center;
    transition:  color 0.2s;
}
.resource-card:hover .resource-card-arrow { color: var(--tnt-red); }


/* ── Note text inside an accordion section ───────────────────────
   Used for short explanatory blurbs above the card grid.           */
.resource-section-note {
    font-size:   0.9rem;
    color:       #555;
    line-height: 1.68;
    padding-top: 0.75rem;
    margin-bottom: 0;
}