/* =========================================================================
   BENTO GRID LAYOUT
   Premium Photo Backgrounds with Color Overlays
   ========================================================================= */

.bento-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Typography - Always White for Dark Photo Cards */
.bento-card h3,
.bento-card p,
.bento-card .bento-icon,
.bento-card .text-sm,
.bento-card .font-medium,
.bento-card span,
.bento-card div {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    /* Stronger shadow for readability */
}

.bento-card p {
    opacity: 0.95;
    font-weight: 500;
}

/* =========================================================================
   NZC LEARNING AREA COLORS - Standard NZ Curriculum
   Premium Photo Backgrounds with Color Overlays
   ========================================================================= */

:root {
    /* English - OCEAN Photo + Blue Overlay */
    --nzc-english: #006994;
    --nzc-english-bg: url('../assets/images/subjects/backgrounds/english-ocean.jpg');
    /* 85% opacity overlay to ensure text is readable */
    --nzc-english-gradient: linear-gradient(135deg, rgba(0, 105, 148, 0.73), rgba(0, 50, 80, 0.8)), var(--nzc-english-bg);

    /* Mathematics - SUNSET Photo + Orange Overlay */
    --nzc-maths: #FF4500;
    --nzc-maths-bg: url('../assets/images/subjects/backgrounds/maths-sunset.jpg');
    --nzc-maths-gradient: linear-gradient(135deg, rgba(255, 69, 0, 0.73), rgba(160, 40, 0, 0.8)), var(--nzc-maths-bg);

    /* Science - BUSH Photo + Green Overlay */
    --nzc-science: #2E8B57;
    --nzc-science-bg: url('../assets/images/subjects/backgrounds/science-bush.jpg');
    --nzc-science-gradient: linear-gradient(135deg, rgba(46, 139, 87, 0.73), rgba(20, 80, 40, 0.8)), var(--nzc-science-bg);

    /* Social Sciences - MOUNTAIN Photo + Purple Overlay */
    --nzc-social: #800080;
    --nzc-social-bg: url('../assets/images/subjects/backgrounds/social-mountains.jpg');
    --nzc-social-gradient: linear-gradient(135deg, rgba(128, 0, 128, 0.73), rgba(80, 0, 80, 0.8)), var(--nzc-social-bg);

    /* Technology - CIRCUIT Photo + Brown/Dark Overlay */
    --nzc-technology: #7a3e0c;
    --nzc-technology-bg: url('../assets/images/subjects/backgrounds/tech-circuit.jpg');
    --nzc-technology-gradient: linear-gradient(135deg, rgba(122, 62, 12, 0.75), rgba(60, 30, 0, 0.85)), var(--nzc-technology-bg);

    /* The Arts - PAINT Photo + Burnt Orange Overlay */
    --nzc-arts: #c06016;
    --nzc-arts-bg: url('../assets/images/subjects/backgrounds/arts-paint.jpg');
    --nzc-arts-gradient: linear-gradient(135deg, rgba(192, 96, 22, 0.73), rgba(120, 50, 10, 0.8)), var(--nzc-arts-bg);

    /* Health - FITNESS Photo + Red Overlay */
    --nzc-health: #E02424;
    --nzc-health-bg: url('../assets/images/subjects/backgrounds/health-fitness.jpg');
    --nzc-health-gradient: linear-gradient(135deg, rgba(224, 36, 36, 0.73), rgba(150, 20, 20, 0.8)), var(--nzc-health-bg);

    /* Physical Education - SPORT Photo + Pink Overlay */
    --nzc-pe: #E91E8C;
    --nzc-pe-bg: url('../assets/images/subjects/backgrounds/pe-sport.jpg');
    --nzc-pe-gradient: linear-gradient(135deg, rgba(233, 30, 140, 0.73), rgba(160, 10, 90, 0.8)), var(--nzc-pe-bg);

    /* Te Reo Māori / Languages - MARAE Photo + Teal/Blue Overlay */
    --nzc-tereo: #00A4E4;
    --nzc-tereo-bg: url('../assets/images/subjects/backgrounds/tereo-marae.jpg');
    --nzc-tereo-gradient: linear-gradient(135deg, rgba(0, 164, 228, 0.73), rgba(0, 100, 160, 0.8)), var(--nzc-tereo-bg);

    /* Te Ao Māori - NATURE Photo + Gold Overlay */
    --nzc-teao: #D4A017;
    --nzc-teao-bg: url('../assets/images/subjects/backgrounds/teao-nature.jpg');
    --nzc-teao-gradient: linear-gradient(135deg, rgba(212, 160, 23, 0.73), rgba(139, 69, 19, 0.8)), var(--nzc-teao-bg);

    /* Cross-Curricular - Forest Green */
    --nzc-cross: #2C5F41;
    --nzc-cross-bg: url('../assets/images/subjects/backgrounds/cross-landscape.jpg');
    --nzc-cross-gradient: linear-gradient(135deg, rgba(44, 95, 65, 0.75), rgba(20, 50, 30, 0.85)), var(--nzc-cross-bg);

    /* Card backgrounds by type */
    --bento-bg-unit: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bento-bg-resource: #ffffff;
    --bento-bg-tool: linear-gradient(135deg, #1fa2ff 0%, #12d8fa 50%, #a6ffcb 100%);
    --bento-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   BENTO GRID UTILITIES (Restored)
   ========================================================================= */
.col-span-2 {
    grid-column: span 2;
}

.row-span-2 {
    grid-row: span 2;
}

@media (max-width: 768px) {

    .col-span-2,
    .row-span-2 {
        grid-column: span 1;
        grid-row: span 1;
    }
}

.bento-card {
    background: #ffffff;
    /* fallback */
    border-radius: 24px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: var(--bento-transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Ensure background image covers the card */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* =========================================================================
   SUBJECT-SPECIFIC CARD STYLES
   ========================================================================= */

/* English - Ocean Blue */
.bento-card[data-subject="english"] {
    background: var(--nzc-english-gradient);
    border-left: 4px solid var(--nzc-english);
}

.bento-card[data-subject="english"]:hover {
    border-left-color: #4dc4ff;
    /* lighter on hover for visibility */
}

/* Mathematics - Orange */
.bento-card[data-subject="mathematics"],
.bento-card[data-subject="maths"],
.bento-card[data-subject="math"] {
    background: var(--nzc-maths-gradient);
    border-left: 4px solid var(--nzc-maths);
}

.bento-card[data-subject="mathematics"]:hover,
.bento-card[data-subject="maths"]:hover,
.bento-card[data-subject="math"]:hover {
    border-left-color: #ff9d70;
}

/* Science - Green */
.bento-card[data-subject="science"] {
    background: var(--nzc-science-gradient);
    border-left: 4px solid var(--nzc-science);
}

.bento-card[data-subject="science"]:hover {
    border-left-color: #6ed69d;
}

/* Social Sciences - Purple */
.bento-card[data-subject="social-sciences"],
.bento-card[data-subject="social"],
.bento-card[data-subject="social-studies"] {
    background: var(--nzc-social-gradient);
    border-left: 4px solid var(--nzc-social);
}

.bento-card[data-subject="social-sciences"]:hover,
.bento-card[data-subject="social"]:hover,
.bento-card[data-subject="social-studies"]:hover {
    border-left-color: #d170d1;
}

/* Technology - Brown */
.bento-card[data-subject="technology"],
.bento-card[data-subject="digital-technology"] {
    background: var(--nzc-technology-gradient);
    border-left: 4px solid var(--nzc-technology);
}

.bento-card[data-subject="technology"]:hover,
.bento-card[data-subject="digital-technology"]:hover {
    border-left-color: #bfa38a;
}

/* The Arts - Burnt Orange */
.bento-card[data-subject="arts"],
.bento-card[data-subject="the-arts"],
.bento-card[data-subject="visual-arts"],
.bento-card[data-subject="music"],
.bento-card[data-subject="drama"] {
    background: var(--nzc-arts-gradient);
    border-left: 4px solid var(--nzc-arts);
}

.bento-card[data-subject="arts"]:hover,
.bento-card[data-subject="the-arts"]:hover,
.bento-card[data-subject="visual-arts"]:hover,
.bento-card[data-subject="music"]:hover,
.bento-card[data-subject="drama"]:hover {
    border-left-color: #fca76c;
}

/* Health - Red */
.bento-card[data-subject="health"],
.bento-card[data-subject="hauora"] {
    background: var(--nzc-health-gradient);
    border-left: 4px solid var(--nzc-health);
}

.bento-card[data-subject="health"]:hover,
.bento-card[data-subject="hauora"]:hover {
    border-left-color: #ff8a8a;
}

/* Physical Education - Pink */
.bento-card[data-subject="pe"],
.bento-card[data-subject="physical-education"],
.bento-card[data-subject="health-pe"] {
    background: var(--nzc-pe-gradient);
    border-left: 4px solid var(--nzc-pe);
}

.bento-card[data-subject="pe"]:hover,
.bento-card[data-subject="physical-education"]:hover,
.bento-card[data-subject="health-pe"]:hover {
    border-left-color: #ff91c4;
}

/* Te Reo Māori / Languages - Light Blue */
.bento-card[data-subject="te-reo"],
.bento-card[data-subject="te-reo-maori"],
.bento-card[data-subject="languages"] {
    background: var(--nzc-tereo-gradient);
    border-left: 4px solid var(--nzc-tereo);
}

.bento-card[data-subject="te-reo"]:hover,
.bento-card[data-subject="te-reo-maori"]:hover,
.bento-card[data-subject="languages"]:hover {
    border-left-color: #70d6ff;
}

/* Te Ao Māori - Gold (distinct from te reo) */
.bento-card[data-subject="te-ao-maori"],
.bento-card[data-subject="maori"],
.bento-card[data-subject="tikanga"] {
    background: var(--nzc-teao-gradient);
    border-left: 4px solid var(--nzc-teao);
}

.bento-card[data-subject="te-ao-maori"]:hover,
.bento-card[data-subject="maori"]:hover,
.bento-card[data-subject="tikanga"]:hover {
    border-left-color: #ffe07a;
}

/* Cross-Curricular - Forest Green (USE SPARINGLY!) */
.bento-card[data-subject="cross-curricular"],
.bento-card[data-subject=""] {
    background: var(--nzc-cross-gradient);
    border-left: 4px solid var(--nzc-cross);
}

.bento-card[data-subject="cross-curricular"]:hover,
.bento-card[data-subject=""]:hover {
    border-left-color: #68d3a0;
}

/* Staggered animation on load */
.bento-card {
    opacity: 0;
    animation: bentoFadeIn 0.5s ease forwards;
}

@keyframes bentoFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================================
   TEACHER NOTE & LAYOUT
   "Seal of Approval" on the Right
   ========================================================================= */

.bento-card {
    flex-direction: row !important;
    /* Switch to horizontal layout */
    align-items: stretch;
    padding: 0 !important;
    /* Reset padding, we'll pad inner containers */
}

.bento-content-left {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 65%;
    /* Constrain width as requested */
    z-index: 2;
}

.bento-content-right {
    width: 35%;
    background: rgba(0, 0, 0, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(10px);
}

.bento-teacher-note {
    font-family: "Caveat", "Indie Flower", serif;
    /* Handwritten feel if available, else serif */
    font-size: 1.1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
    font-style: italic;
    text-align: left;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.bento-teacher-note strong {
    color: #ffd700;
    /* Gold highlight for 'Broken' or key terms */
    font-weight: 600;
    font-style: normal;
}

/* Adjust title to respect the new constraint */
.bento-title {
    margin-right: 0;
    /* The max-width on .bento-content-left handles the constraint */
}

/* Status: Pending Review */
.bento-teacher-note.bento-teacher-note--pending {
    opacity: 0.6;
    font-size: 0.95rem;
    font-family: inherit;
    /* Reset to system font for "system" message */
    font-style: normal;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}