/*
 * tnt-stylin.css
 * TNT | TechNoviceTools | Styl'n page
 * Used by: stylin.html (root)
 * Loads after: tnt-base-styles.css
 *
 * Theme: the vintage beauty salon — transforming raw, unstyled HTML
 * into something glamorous. Every section name leans into the metaphor.
 *
 * Covers: hero config, salon intro section, training/foundations grid,
 *         apps offcanvas, inspiration links, legacy archive bar.
 */


/* ═══════════════════════════════════════════════════════════════════
   HERO — Styl'n page
   Background: images/vintage_beauty_shop_1200x1200.jpg
   A teal-and-pink vintage beauty salon — the perfect metaphor for
   what CSS and Bootstrap do to plain HTML.
   Warm magenta-to-teal overlay matches the salon's own palette.
═══════════════════════════════════════════════════════════════════ */
#hero {
    min-height: 52vh;
    background:
        linear-gradient(to right, rgba(12,4,20,0.82) 0%, rgba(12,4,20,0.45) 55%, rgba(0,60,72,0.20) 100%),
        url('../images/vintage_beauty_shop_1200x1200.jpg') center 30% / cover no-repeat;
    padding: 4.5rem 1rem;
}

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

@media (max-width: 760px) {
    #hero { background-position: center center; }
}


/* ═══════════════════════════════════════════════════════════════════
   SALON INTRO  (#salonIntro)
   Light warm background — the reception desk, welcoming you in.
═══════════════════════════════════════════════════════════════════ */
#salonIntro {
    background: #f9f4ee;
    padding: 5rem 0;
}

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

#salonIntro p {
    font-size: 0.96rem;
    color: #444;
    line-height: 1.72;
}

/* Inspiration links list inside the intro */
.salon-inspiration-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.salon-inspiration-list li {
    padding: 0.4rem 0;
    border-bottom: 1px dotted #ddd;
    font-size: 0.92rem;
}

.salon-inspiration-list li:last-child { border-bottom: none; }

.salon-inspiration-list li::before {
    content: '✦';
    color: var(--tnt-amber);
    margin-right: 0.5rem;
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Legacy archive bar — same pattern as news/resources pages */
.stylin-legacy-bar {
    background:    var(--tnt-dark);
    border:        1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding:       1.25rem 1.75rem;
    display:       flex;
    align-items:   center;
    gap:           1.25rem;
    flex-wrap:     wrap;
    height:        100%;
}

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

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

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

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


/* ═══════════════════════════════════════════════════════════════════
   FOUNDATIONS SECTION  (#foundations)
   Dark section — the styling toolkit shelf.
   Cards link to training/reference tools (HTML skeletons, checklist,
   Billboard 101, etc.) rather than entertainment apps.
═══════════════════════════════════════════════════════════════════ */
#foundations {
    background: linear-gradient(180deg, #0a0e1a 0%, #0e1228 100%);
    padding: 5rem 0 6rem;
}

#foundations .section-title  { color: #fff; }
#foundations .section-label  { color: var(--tnt-amber); }
#foundations .section-sub {
    color:      rgba(255,255,255,0.6);
    max-width:  600px;
    margin:     0 auto;
    font-size:  0.96rem;
}

/* Foundation card — same shape as category cards in explore.html */
.foundation-card {
    background:    #141a2e;
    border:        1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding:       1.75rem 1.25rem 1.5rem;
    text-align:    center;
    text-decoration: none;
    color:         #fff;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    height:        100%;
    transition:    border-color 0.25s, transform 0.2s, box-shadow 0.2s;
}

.foundation-card:hover {
    border-color:    var(--tnt-amber);
    transform:       translateY(-4px);
    box-shadow:      0 12px 32px rgba(230,159,77,0.18);
    color:           #fff;
    text-decoration: none;
}

.foundation-card-icon {
    width:         54px;
    height:        54px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink:   0;
}

.foundation-card-icon img {
    width:      36px;
    height:     36px;
    object-fit: contain;
}

.foundation-card-icon i { font-size: 1.6rem; }

.foundation-card-title {
    font-family:   var(--boogaloo);
    font-size:     1.05rem;
    color:         var(--tnt-amber);
    margin-bottom: 0.3rem;
    line-height:   1.2;
}

.foundation-card-desc {
    font-size:  0.8rem;
    color:      rgba(255,255,255,0.58);
    line-height: 1.5;
    flex-grow:  1;
}


/* ═══════════════════════════════════════════════════════════════════
   APPS SECTION  (#stylinApps)
   Light section — the finished looks, ready to show off.
   HOW TO ADD A NEW APP:
     Add a col block inside the row with class="stylin-app-card" link.
     Then add it to the offcanvas panel at the bottom (see pattern).
═══════════════════════════════════════════════════════════════════ */
#stylinApps {
    background: #f4f5f7;
    padding:    5rem 0;
}

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

/* App card — clickable, with an icon + title + one-liner */
.stylin-app-card {
    background:      #fff;
    border:          1.5px solid #e2e4e8;
    border-radius:   12px;
    padding:         1.5rem 1rem 1.25rem;
    text-align:      center;
    text-decoration: none;
    color:           var(--tnt-dark);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    height:          100%;
    transition:      border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.stylin-app-card:hover {
    border-color:    var(--tnt-red);
    transform:       translateY(-3px);
    box-shadow:      0 8px 22px rgba(216,24,39,0.12);
    color:           var(--tnt-dark);
    text-decoration: none;
}

.stylin-app-icon {
    font-size:     2.2rem;
    margin-bottom: 0.65rem;
    line-height:   1;
}

.stylin-app-title {
    font-family:   var(--boogaloo);
    font-size:     1.05rem;
    margin-bottom: 0.25rem;
    line-height:   1.2;
}

.stylin-app-desc {
    font-size:   0.78rem;
    color:       #666;
    line-height: 1.45;
    flex-grow:   1;
}

/* "See all" button — opens offcanvas of full legacy list */
.stylin-see-all {
    display:       block;
    width:         100%;
    background:    none;
    border:        1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    color:         #777;
    font-size:     0.82rem;
    font-weight:   700;
    padding:       0.45rem 0.75rem;
    text-align:    center;
    cursor:        pointer;
    margin-top:    1rem;
    transition:    border-color 0.2s, color 0.2s, background 0.2s;
}

.stylin-see-all:hover {
    border-color: var(--tnt-red);
    color:        var(--tnt-red);
    background:   rgba(216,24,39,0.05);
}


/* ═══════════════════════════════════════════════════════════════════
   OFFCANVAS — full legacy app list
   Same pattern as explore.html offcanvas.
═══════════════════════════════════════════════════════════════════ */
.tnt-offcanvas {
    background:   #0e1228;
    border-left:  2px solid var(--tnt-amber);
    width:        360px;
    max-width:    92vw;
}

.tnt-offcanvas .offcanvas-header {
    background:   #141a2e;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding:      1.25rem 1.5rem;
}

.tnt-offcanvas .offcanvas-title {
    font-family: var(--boogaloo);
    font-size:   1.4rem;
    color:       #fff;
}

.tnt-offcanvas .offcanvas-body {
    padding:    1.5rem;
    overflow-y: auto;
}

.offcanvas-section-label {
    font-family:    var(--boogaloo);
    font-size:      0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--tnt-amber);
    margin-bottom:  0.6rem;
}

.offcanvas-intro {
    font-size:     0.87rem;
    color:         rgba(255,255,255,0.6);
    line-height:   1.6;
    margin-bottom: 1.25rem;
}

.offcanvas-app-list {
    list-style: none;
    padding:    0;
    margin:     0 0 1.5rem;
}

.offcanvas-app-list li + li { margin-top: 0.4rem; }

.offcanvas-app-link {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.5rem 0.65rem;
    border-radius:   8px;
    background:      rgba(255,255,255,0.04);
    text-decoration: none;
    transition:      background 0.2s;
}

.offcanvas-app-link:hover {
    background:      rgba(230,159,77,0.12);
    text-decoration: none;
}

.offcanvas-app-link i {
    color:      var(--tnt-amber-dark);
    font-size:  0.9rem;
    flex-shrink: 0;
}

.offcanvas-app-name {
    color:      #fff;
    font-size:  0.9rem;
    font-weight: 600;
    flex-grow:  1;
}

.offcanvas-legacy-section {
    border-top:  1px solid rgba(255,255,255,0.08);
    padding-top: 1.25rem;
    margin-top:  0.5rem;
}

.offcanvas-legacy-note {
    font-size:     0.84rem;
    color:         rgba(255,255,255,0.5);
    line-height:   1.55;
    margin-bottom: 1rem;
}