/*
 * ┌─────────────────────────────────────────────────────────────────┐
 * │  STEP 6 of 13 — css/teaching.css                                │
 * │                                                                 │
 * │  Two visual systems for course cards:                           │
 * │   1. Classic course-card (a simple left-bordered box)           │
 * │   2. NES cartridge tile — a pure-CSS replica of a game          │
 * │      cartridge using CSS Grid areas                             │
 * │   3. Web-cartridge tile — a lighter retro card for web courses  │
 * │                                                                 │
 * │  KEY CONCEPT: CSS Grid named areas.                             │
 * │  grid-template sets the rows/columns, then each cell is placed  │
 * │  with grid-area: rowStart / colStart / rowEnd / colEnd.         │
 * │  This creates the cartridge shape without any images — just CSS.│
 * │                                                                 │
 * │  KEY CONCEPT: CSS scope via parent selector.                    │
 * │  All cartridge rules are prefixed .nes-cart-tile .xxx so they   │
 * │  can't bleed out and style other elements on the page.          │
 * │  Without this scoping, rules like * { background: lightgrey }   │
 * │  would break every other element on the page.                   │
 * │                                                                 │
 * │  ▶  Next: See css/research.css (Step 7)                        │
 * └─────────────────────────────────────────────────────────────────┘
 */

/* ===================================
   Teaching Section
   =================================== */
.teaching-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.course-category h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--border-color);
}

.course-card {
    background: white;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--secondary-color);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.course-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.course-card h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.course-card p {
    color: var(--text-light);
    margin: 0;
}

.teaching-approach {
    background: var(--bg-color);
    padding: var(--spacing-lg);
    border-radius: 8px;
    margin-top: var(--spacing-xl);
}

.teaching-approach h3 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.approach-item {
    text-align: center;
    padding: var(--spacing-md);
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.approach-item h4 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
}

/* ===================================
   Course Tiles
   =================================== */

.course-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: var(--spacing-md);
    align-items: start;
    margin-bottom: var(--spacing-md);
}

/* NES Cartridge Tile (Game Programming) */
.nes-cart-tile {
    display: flex;
    justify-content: center;
}

.nes-cart-tile .nes-container {
    max-width: 260px;
    width: 100%;
    border: 3px solid black;
    padding: 10px;
    background-color: lightgrey;
}

.nes-cart-tile .nes {
    display: grid;
    aspect-ratio: 5/4;
    grid-template: 1fr 10fr 1fr 1fr 1fr 1fr / 0.25fr 0.3fr 0.25fr 1fr 3fr 0.25fr 0.3fr 0.25fr;
    background-color: lightgrey;
}

.nes-cart-tile .left-notch-left {
    background-color: grey;
    grid-area: 1 / 1 / 2 / 2;
    border-top: 2px solid black;
    border-left: 2px solid black;
}
.nes-cart-tile .left-notch {
    background-color: grey;
    grid-area: 1 / 2 / 2 / 3;
    border-top: 2px solid black;
    margin-top: 5px;
}
.nes-cart-tile .left-notch-right {
    background-color: grey;
    grid-area: 1 / 3 / 2 / 4;
    border-top: 2px solid black;
}
.nes-cart-tile .grip {
    grid-area: 1 / 4 / 2 / 5;
    background-image: linear-gradient(0deg, rgb(83,83,83) 25%, rgb(128,128,128) 25%, rgb(128,128,128) 50%, rgb(83,83,83) 50%, rgb(83,83,83) 75%, rgb(128,128,128) 75%, rgb(128,128,128) 100%);
    border: 2px solid black;
    border-radius: 0px 0px 10px 10px;
}
.nes-cart-tile .cover-image {
    background-color: grey;
    padding: 0;
    grid-area: 1 / 5 / 3 / 6;
    border-top: 2px solid black;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.nes-cart-tile .right-notch-left {
    grid-area: 1 / 6 / 2 / 7;
    background-color: grey;
    border-top: 2px solid black;
}
.nes-cart-tile .right-notch {
    background-color: grey;
    grid-area: 1 / 7 / 2 / 8;
    border-top: 2px solid black;
    margin-top: 5px;
}
.nes-cart-tile .right-notch-right {
    background-color: grey;
    grid-area: 1 / 8 / 2 / 9;
    border-top: 2px solid black;
    border-right: 2px solid black;
}
.nes-cart-tile .left-side {
    background-color: grey;
    grid-area: 2 / 1 / 5 / 4;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
}
.nes-cart-tile .grip-extend {
    background-image: repeating-linear-gradient(0deg, rgb(83,83,83) 0px, rgb(83,83,83) 10px, rgb(128,128,128) 10px, rgb(128,128,128) 20px);
    grid-area: 2 / 4 / 7 / 5;
    border: 2px solid black;
    margin-top: -5px;
}
.nes-cart-tile .right-side {
    background-color: grey;
    grid-area: 2 / 6 / 5 / 9;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
.nes-cart-tile .cart-arrow {
    background-color: grey;
    grid-area: 3 / 5 / 6 / 6;
    padding: 10px 20px;
}
.nes-cart-tile .cart-arrow svg {
    background-color: grey;
    display: block;
    rotate: 180deg;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.nes-cart-tile .left-bottom-side {
    background-color: grey;
    grid-area: 5 / 2 / 7 / 4;
    border-top: 2px solid grey;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    margin-top: -2px;
}
.nes-cart-tile .bottom-grip {
    background-color: grey;
    grid-area: 6 / 4 / 7 / 5;
    border: 2px solid black;
    border-radius: 10px 10px 0px 0px;
}
.nes-cart-tile .right-bottom-side {
    background-color: grey;
    grid-area: 5 / 5 / 7 / 8;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    border-top: 2px solid grey;
    margin-top: -2px;
}

.nes-label-content {
    background-color: #1a472a;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 6px;
    border-radius: 0 0 10px 10px;
}
.nes-label-number {
    font-size: 0.6rem;
    letter-spacing: 1px;
    opacity: 0.75;
    text-transform: uppercase;
}
.nes-label-title {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 5px 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.nes-label-semester {
    font-size: 0.55rem;
    opacity: 0.65;
    margin-bottom: 5px;
}
.nes-label-link {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(255,255,255,0.2);
    color: white;
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.6rem;
    border: 1px solid rgba(255,255,255,0.4);
    transition: background var(--transition-fast);
}
.nes-label-link:hover {
    background: rgba(255,255,255,0.35);
}

.nes-label--ocu {
    background: linear-gradient(160deg, #002147 0%, #00336e 100%);
}

.nes-label--ocu .nes-label-title {
    color: #f5c842;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* Game project card: cartridge + description side by side */
.game-project-card {
    grid-column: 1 / -1;
}

.game-project-layout {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.game-cart-col {
    flex-shrink: 0;
}

.game-desc-col {
    flex: 1;
}

@media (max-width: 600px) {
    .game-project-layout {
        flex-direction: column;
    }
}

/* Web Cartridge Tiles (Web Dev family + other courses) */
.web-cart-tile {
    display: block;
    text-decoration: none;
    border: 3px solid #222;
    border-radius: 6px 6px 0 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
}
.web-cart-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.web-cart-tile.no-link {
    cursor: default;
}
.web-cart-tile.no-link:hover {
    transform: none;
    box-shadow: none;
}
.web-cart-header {
    height: 16px;
    border-bottom: 2px solid rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    gap: 4px;
}
.web-cart-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(0,0,0,0.2);
}
.web-cart-body {
    padding: 14px 14px 12px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.web-cart-number {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
}
.web-cart-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px;
}
.web-cart-cta {
    font-size: 0.68rem;
    opacity: 0.7;
    font-weight: 600;
}
.web-cart-footer {
    height: 16px;
    border-top: 2px solid rgba(0,0,0,0.15);
    background: rgba(0,0,0,0.07);
}

.web-cart--blue  { background-color: #dbeafe; color: #1e3a8a; }
.web-cart--blue  .web-cart-header { background-color: #1e40af; }
.web-cart--teal  { background-color: #ccfbf1; color: #134e4a; }
.web-cart--teal  .web-cart-header { background-color: #0f766e; }
.web-cart--amber { background-color: #fef3c7; color: #78350f; }
.web-cart--amber .web-cart-header { background-color: #d97706; }
.web-cart--green { background-color: #dcfce7; color: #14532d; }
.web-cart--green .web-cart-header { background-color: #16a34a; }
.web-cart--slate { background-color: #e2e8f0; color: #1e293b; }
.web-cart--slate .web-cart-header { background-color: #334155; }
.web-cart--purple { background-color: #ede9fe; color: #4c1d95; }
.web-cart--purple .web-cart-header { background-color: #6d28d9; }