/* ========================================
   LEARNING NETWORK - ARTISTIC CANVAS DESIGN
   Sketch-style artistic canvas design for the learning network page
   ======================================== */

/* Sketch-Style Artistic Canvas Design */
:root {
    --color-paper: #fcfcfc;
    --color-grid: #e0e0e0;
    --color-text: #1f2937;
    --color-accent-blue: #3b82f6;
    --color-accent-red: #ef4444;
    --color-accent-orange: #f97316;
    --color-accent-purple: #8b5cf6;
    --font-size-h1: clamp(2rem, 5vw + 1rem, 3.5rem);
    --font-size-title: clamp(1rem, 2.5vw + 0.5rem, 1.5rem);
    --font-size-text: clamp(0.9rem, 1.5vw + 0.5rem, 1.1rem);
    --font-size-detail: clamp(0.75rem, 1vw + 0.5rem, 0.9rem);
}

/* Learning Network Header with Title and Stops */
.learning-network-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(0.07rem, 0.35vw, 0.175rem); /* Reduced by 30% from clamp(0.1rem, 0.5vw, 0.25rem) */
    margin-bottom: clamp(0.1rem, 0.25vw, 0.25rem); /* Very minimal gap */
    flex-wrap: wrap;
}

.learning-network-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(3rem, 5vw + 1rem, 4rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 4rem 2.8rem 0 0; /* Right margin reduced by 30% (from 4rem to 2.8rem) to bring title closer */
}

.header-stops-container {
    display: flex;
    gap: clamp(0.2rem, 2vw, 0.4rem);
    align-items: flex-end;
    padding-bottom: 0; /* Remove padding to bring stops closer */
}

/* Medium Stops for Header */
.medium-stop {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 8px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    flex-shrink: 0;
}

.medium-stop .stop-code {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #333;
}

/* Program-specific colors for medium stops */
.medium-stop.w-stop {
    border-color: #1ABC9C;
}

.medium-stop.rh-stop {
    border-color: #8A2BE2;
}

.medium-stop.bck-stop {
    border-color: #FF69B4;
}

.medium-stop.tc-stop {
    border-color: #E74C3C;
}

.medium-stop.bb-stop {
    border-color: #FFD700;
}

.medium-stop.gt-stop {
    border-color: #34495E;
}

.medium-stop.test-stop {
    border-color: #667eea;
}

.artistic-canvas {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: clamp(1rem, 3vw, 2.5rem) clamp(0.5rem, 4vw, 1.5rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
    background-image:
        linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 4rem);
    box-sizing: border-box;
}

.program-station {
    position: relative;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    padding: clamp(1.5rem, 3vw, 3rem);
    border-radius: 8px;
    margin-bottom: 0;
    box-sizing: border-box;
    min-height: clamp(400px, 50vh, 600px);
    overflow: visible;
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}

/* Default: all stations use row (normal order) */
.program-station {
    flex-direction: row;
}

/* Station 1, 3, 5, 7 (ODD): Images on LEFT, Content on RIGHT */
/* HTML: Images first, Content second. With row, Images LEFT, Content RIGHT */
.program-station:nth-of-type(2),
.program-station:nth-of-type(4),
.program-station:nth-of-type(6),
.program-station:nth-of-type(8) {
    flex-direction: row !important; /* Images LEFT, Content RIGHT */
}

/* Station 2, 4, 6 (EVEN): Content on LEFT, Images on RIGHT */
/* HTML: Content first, Images second. With row, Content LEFT, Images RIGHT */
.program-station:nth-of-type(3),
.program-station:nth-of-type(5),
.program-station:nth-of-type(7) {
    flex-direction: row !important; /* Content LEFT, Images RIGHT */
}

/* Station content container */
.program-station-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-width: 50%;
    position: relative;
    z-index: 10; /* Ensure content is above images */
}

/* Images container - consistent across all stations */
.program-station-images {
    flex: 1;
    min-width: 0;
    max-width: 50%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1; /* Below content */
    overflow: hidden; /* Prevent images from overflowing */
}

/* Wonders special grid layout - 2 rows, 3 books per row */
.program-station-images.wonders-books-grid {
    display: grid !important; /* Force grid, override flex from base rule */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.2rem; /* Small spacing between books */
    row-gap: 0.2rem;
    column-gap: 0.2rem;
    align-items: stretch;
    justify-items: stretch; /* Fill grid cells */
    flex: 0 0 50%; /* Keep 50% width for side-by-side layout */
    max-width: 50%; /* Keep 50% limit to work with station content */
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    flex-wrap: nowrap !important; /* Override flex-wrap from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    position: relative;
    z-index: 1;
    transform: scale(0.9) translateY(10%); /* Shrink Wonders books by 10% and lower down by 10% */
}

.program-station-images.wonders-books-grid .gallery-card {
    width: 100%;
    height: 100%;
    padding: 0 !important; /* No padding - books should be touching */
    margin: 0 !important; /* No margin */
    border: none !important; /* No border */
    border-radius: 8px !important; /* Slight radius on books */
    outline: none !important;
    transform: none !important; /* Remove scale - it creates gaps */
    transform-origin: center; /* Center for hover pop-out */
    box-sizing: border-box;
    flex: none !important; /* Override flex properties from base rule */
    min-width: 0 !important; /* Override min-width from base rule */
    overflow: hidden !important; /* Clip to border-radius */
    transition: transform 0.3s ease, z-index 0.3s ease;
    position: relative;
}

/* Hover effect - pop out slightly */
.program-station-images.wonders-books-grid .gallery-card:hover {
    transform: scale(1.15) !important; /* Pop out 15% larger */
    z-index: 10;
}

.program-station-images.wonders-books-grid .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Use contain to prevent cutting off */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}

/* Florida Wonders image now matches others after resizing */
.program-station-images.wonders-books-grid .gallery-card img[src*="Florida_Wonders"] {
    object-fit: contain !important; /* Same as other Wonders images */
    border-radius: 8px !important; /* Ensure border-radius */
}

/* Big Book special grid layout - 2 rows, 4 books per row */
.program-station-images.bb-books-grid {
    display: grid !important; /* Force grid, override flex from base rule */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.2rem; /* Small spacing between books */
    row-gap: 0.2rem;
    column-gap: 0.2rem;
    align-items: stretch;
    justify-items: stretch; /* Fill grid cells */
    flex: 0 0 50%; /* Keep 50% width for side-by-side layout */
    max-width: 50%; /* Keep 50% limit to work with station content */
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    flex-wrap: nowrap !important; /* Override flex-wrap from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    position: relative;
    z-index: 1;
    transform: translateY(10%); /* Lower Big Book images down by 10% */
}

.program-station-images.bb-books-grid .gallery-card {
    width: 100%;
    height: 100%;
    padding: 0 !important; /* No padding - books should be touching */
    margin: 0 !important; /* No margin */
    border: none !important; /* No border */
    border-radius: 8px !important; /* Slight radius on books */
    outline: none !important;
    transform: none !important; /* Remove scale - it creates gaps */
    transform-origin: center; /* Center for hover pop-out */
    box-sizing: border-box;
    flex: none !important; /* Override flex properties from base rule */
    min-width: 0 !important; /* Override min-width from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    transition: transform 0.3s ease, z-index 0.3s ease;
    position: relative;
}

.program-station-images.bb-books-grid .gallery-card img {
    border-radius: 8px; /* Match card border radius */
}

/* Hover effect - pop out slightly */
.program-station-images.bb-books-grid .gallery-card:hover {
    transform: scale(1.15) !important; /* Pop out 15% larger */
    z-index: 10;
}

.program-station-images.bb-books-grid .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* Use contain to prevent cutting off */
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important; /* Match card border radius */
    outline: none !important;
}

/* Time Chronicles special grid layout - 3 rows, 4 books per row */
.program-station-images.tc-books-grid {
    display: grid !important; /* Force grid, override flex from base rule */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.2rem; /* Small spacing between books */
    row-gap: 0.2rem;
    column-gap: 0.2rem;
    align-items: stretch;
    justify-items: stretch; /* Fill grid cells */
    flex: 0 0 50%; /* Keep 50% width for side-by-side layout */
    max-width: 50%; /* Keep 50% limit to work with station content */
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    flex-wrap: nowrap !important; /* Override flex-wrap from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    position: relative;
    z-index: 1;
    transform: translateY(10%); /* Lower Time Chronicles books down by 10% */
}

.program-station-images.tc-books-grid .gallery-card {
    width: 100%;
    height: 100%;
    padding: 0 !important; /* No padding - books should be touching */
    margin: 0 !important; /* No margin */
    border: none !important; /* No border */
    border-radius: 8px !important; /* Slight radius on books */
    outline: none !important;
    transform: none !important; /* Remove scale - it creates gaps */
    transform-origin: center; /* Center for hover pop-out */
    box-sizing: border-box;
    flex: none !important; /* Override flex properties from base rule */
    min-width: 0 !important; /* Override min-width from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    transition: transform 0.3s ease, z-index 0.3s ease;
    position: relative;
}

/* Hover effect - pop out slightly */
.program-station-images.tc-books-grid .gallery-card:hover {
    transform: scale(1.15) !important; /* Pop out 15% larger */
    z-index: 10;
}

.program-station-images.tc-books-grid .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* Use contain to prevent cutting off */
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important; /* Match card border radius */
    outline: none !important;
}

/* Reach Higher special grid layout - 2 rows, 4 books per row */
.program-station-images.rh-books-grid {
    display: grid !important; /* Force grid, override flex from base rule */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.2rem; /* Small spacing between books */
    row-gap: 0.2rem;
    column-gap: 0.2rem;
    align-items: stretch;
    justify-items: stretch; /* Fill grid cells */
    flex: 0 0 50%; /* Keep 50% width for side-by-side layout */
    max-width: 50%; /* Keep 50% limit to work with station content */
    width: auto;
    height: 100%; /* Fill parent container height */
    max-height: 400px; /* Prevent images from becoming too large */
    padding: 0 !important; /* No padding - books should be touching */
    margin: 0 !important; /* No margin */
    border: none !important; /* No border */
    outline: none !important;
    flex-wrap: nowrap !important; /* Override flex-wrap from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    position: relative;
    z-index: 1;
    transform: translateY(15%); /* Move Reach Higher books down 15% vertically */
}

.program-station-images.rh-books-grid .gallery-card {
    width: 100%;
    height: 100%;
    padding: 0 !important; /* No padding - books should be touching */
    margin: 0 !important; /* No margin */
    border: none !important; /* No border */
    border-radius: 8px !important; /* Slight radius on books */
    outline: none !important;
    transform: none !important; /* Remove scale - it creates gaps */
    transform-origin: center; /* Center for hover pop-out */
    box-sizing: border-box;
    flex: none !important; /* Override flex properties from base rule */
    min-width: 0 !important; /* Override min-width from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    transition: transform 0.3s ease, z-index 0.3s ease;
    position: relative;
}

/* Hover effect - pop out slightly */
.program-station-images.rh-books-grid .gallery-card:hover {
    transform: scale(1.15) !important; /* Pop out 15% larger */
    z-index: 10;
}

.program-station-images.rh-books-grid .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* Use contain to prevent cutting off */
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important; /* Match card border radius */
    outline: none !important;
}

/* Greatest Tales special grid layout - 2 rows, 3 books per row */
.program-station-images.gt-books-grid {
    display: grid !important; /* Force grid, override flex from base rule */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.2rem; /* Small spacing between books */
    row-gap: 0.2rem;
    column-gap: 0.2rem;
    align-items: stretch;
    justify-items: stretch; /* Fill grid cells */
    flex: 0 0 50%; /* Keep 50% width for side-by-side layout */
    max-width: 50%; /* Keep 50% limit to work with station content */
    padding: 0 !important; /* No padding - books should be touching */
    margin: 0 !important; /* No margin */
    border: none !important; /* No border */
    outline: none !important;
    flex-wrap: nowrap !important; /* Override flex-wrap from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    position: relative;
    z-index: 1;
    transform: scale(0.8) translateY(10%); /* Shrink Greatest Tales books by 20% and lower down by 10% */
}

.program-station-images.gt-books-grid .gallery-card {
    width: 100%;
    height: 100%;
    padding: 0 !important; /* No padding - books should be touching */
    margin: 0 !important; /* No margin */
    border: none !important; /* No border */
    border-radius: 8px !important; /* Slight radius on books */
    outline: none !important;
    transform: none !important; /* Remove scale - it creates gaps */
    transform-origin: center; /* Center for hover pop-out */
    box-sizing: border-box;
    flex: none !important; /* Override flex properties from base rule */
    min-width: 0 !important; /* Override min-width from base rule */
    overflow: visible; /* Allow hover pop-out effect */
    transition: transform 0.3s ease, z-index 0.3s ease;
    position: relative;
}

/* Hover effect - pop out slightly */
.program-station-images.gt-books-grid .gallery-card:hover {
    transform: scale(1.15) !important; /* Pop out 15% larger */
    z-index: 10;
}

.program-station-images.gt-books-grid .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* Use contain to prevent cutting off */
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important; /* Match card border radius */
    outline: none !important;
}

/* Image items - flexible sizing for 1-4 images */
.program-station-images .gallery-card {
    flex: 1 1 auto;
    min-width: clamp(150px, 20vw, 250px);
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    padding: clamp(0.5rem, 1vw, 1rem);
}

.program-station-images .gallery-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Override base rule for Wonders books to ensure border-radius - MUST come after base rule at line 483 */
.program-station-images.wonders-books-grid .gallery-card img {
    border-radius: 8px !important;
}

/* Force border-radius on all Wonders images - explicit override with highest specificity */
.program-station-images.wonders-books-grid .gallery-card img[src*="anthology_wonders"],
.program-station-images.wonders-books-grid .gallery-card img[src*="Reading_wonders"],
.program-station-images.wonders-books-grid .gallery-card img[src*="reading_writing_wonders"],
.program-station-images.wonders-books-grid .gallery-card img[src*="reading_writing_wonders_red"],
.program-station-images.wonders-books-grid .gallery-card img[src*="unit4"] {
    border-radius: 8px !important;
    object-fit: contain !important;
}

/* Make BCK ALL_Characters image (second image at bottom) smaller */
.program-station-images .gallery-card img[src*="ALL_Characters"] {
    width: 70% !important; /* Reduce to 70% of container */
    max-width: 70% !important;
    height: auto !important;
    margin: 0 auto !important; /* Center the smaller image */
    display: block !important;
    object-fit: contain !important;
}

/* Ensure BCK image container doesn't force large size */
.program-station-images .gallery-card:has(img[src*="ALL_Characters"]) {
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.program-station-images {
    overflow: visible !important; /* Allow wider images to extend */
}

/* Single image takes more space */
.program-station-images .gallery-card:only-child {
    max-width: 100%;
    flex: 1 1 100%;
}

/* Two images - each takes ~48% */
.program-station-images .gallery-card:nth-child(2):last-child {
    max-width: 48%;
    flex: 1 1 48%;
}

/* Three images - each takes ~32% */
.program-station-images .gallery-card:nth-child(3):last-child {
    max-width: 32%;
    flex: 1 1 32%;
}

/* Four images - each takes ~24% */
.program-station-images .gallery-card:nth-child(4):last-child {
    max-width: 24%;
    flex: 1 1 24%;
}

.program-station:hover {
    transform: scale(1.05);
    background-color: rgba(224, 224, 224, 0.3);
}

/* Title with logo inline */
.program-title-with-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: calc(clamp(60px, 8vw, 100px) + 2rem); /* Logo height + 2rem spacing */
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.program-title {
    font-family: 'Architects Daughter', cursive;
    font-size: var(--font-size-title);
    font-weight: 400;
    margin: 0; /* Remove margins since parent handles spacing */
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    white-space: normal;
}

.program-logo-inline {
    width: clamp(60px, 8vw, 100px);
    height: auto;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-left: auto; /* Push to right side */
}

.program-logo-inline:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Big Book station: align title with top of books */
.program-station-with-books .program-title {
    margin-top: 0; /* Flush with top of books */
}

.tpd-cefr-level-display {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    margin-left: 1.5rem;
}

/* Big Book station: align CEFR blobs with top of books */
.program-station-with-books .tpd-cefr-level-display {
    margin-top: 0.5rem; /* Small spacing after title */
}

.program-description {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-detail);
    line-height: 1.5;
    color: #4b5563;
    margin-top: clamp(1.5rem, 2vw, 2rem);
    max-width: 100%;
}

/* Big Book station: align description with top of books */
.program-station-with-books .program-description {
    margin-top: 1rem; /* Reduced spacing to align with books */
}

.program-station-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.25rem;
}

.program-gallery-image {
    max-width: 140px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
    background: #fff;
}

.program-feature-image {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 8px;
    margin-top: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.program-feature-image:hover {
    transform: scale(1.02);
}

/* Special layout for BCK program with large image to the left */
.program-station-with-image {
    width: clamp(280px, 25vw + 120px, 380px); /* Same as normal station */
    max-width: 100%;
}

/* BCK images container - 2 rows positioned to the left */
.bck-images-container {
    position: absolute;
    left: 0;
    transform: translateX(calc(-100% - clamp(1rem, 2vw, 2rem))) translateY(-50%);
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1rem);
    width: clamp(400px, 50vw, 800px);
    z-index: 5;
}

.bck-image-top,
.bck-image-bottom {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.95;
}

.bck-image-top:hover,
.bck-image-bottom:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .bck-images-container {
        width: clamp(300px, 45vw, 600px);
    }
}

@media (max-width: 1024px) {
    /* BCK images will stack below - handled in main media query above */
    .bck-images-container {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 1.5rem;
    }
}

/* Ensure BCK station doesn't hide the image */
.program-station-with-image {
    overflow: visible !important;
}

.program-station-with-right-gallery {
    overflow: visible !important;
    margin-left: clamp(0.5rem, 5vw, 5rem) !important;
    width: min(100%, clamp(320px, 26vw + 140px, 460px));
}

/* Wonders station gallery tweaks */
 .program-gallery {
    position: absolute;
    top: 50%;
    display: flex;
    gap: clamp(0.75rem, 1vw, 1.25rem);
    width: clamp(320px, 40vw, 520px);
    transform: translateY(-50%);
    z-index: 5;
    flex-wrap: wrap;
    justify-content: center;
}

.program-gallery-left {
    left: 0;
    transform: translateY(-50%) translateX(calc(-100% - clamp(1rem, 2vw, 2rem)));
}

.program-gallery-right {
    right: 0;
    transform: translateY(-50%) translateX(calc(100% + clamp(1rem, 2vw, 2rem)));
}

.program-gallery .gallery-card {
    flex: 1 1 48%;
    min-width: 150px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.program-gallery .gallery-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.wonders-gallery {
    width: clamp(300px, 34vw, 440px);
}

.rh-gallery {
    width: clamp(340px, 42vw, 560px);
}

.gt-gallery {
    width: clamp(300px, 38vw, 500px);
}

.program-gallery {
    position: absolute;
    top: 50%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 1vw, 1.25rem);
    width: clamp(320px, 40vw, 520px);
    transform: translateY(-50%);
    z-index: 5;
    justify-content: center;
    align-items: stretch;
}

.program-gallery-left {
    left: 0;
    transform: translateY(-50%) translateX(calc(-100% - clamp(1rem, 2vw, 2rem)));
}

.program-gallery-right {
    right: 0;
    transform: translateY(-50%) translateX(calc(100% + clamp(1rem, 2vw, 2rem)));
}

.program-gallery .gallery-card {
    flex: 1 1 48%;
    min-width: 150px;
    min-height: clamp(180px, 22vw, 260px);
    border-radius: 16px;
    background: white;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    padding: clamp(0.35rem, 0.8vw, 0.75rem);
}

/* Remove background cards on mobile */
@media (max-width: 1024px) {
    .program-gallery .gallery-card {
        background: transparent;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }
}

.program-gallery .gallery-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
}

.wonders-gallery .gallery-card:first-child {
    flex: 1 1 100%;
    min-height: clamp(220px, 28vw, 360px);
}

.wonders-gallery .gallery-card:last-child {
    min-height: clamp(170px, 18vw, 260px);
}

/* Override desktop flex for mobile to ensure side by side */
@media (max-width: 1024px) {
    .wonders-gallery .gallery-card:first-child {
        flex: 0 0 auto;
        min-height: auto;
    }
    
    .wonders-gallery .gallery-card:last-child {
        flex: 0 0 auto;
        min-height: auto;
    }
}

.rh-gallery .gallery-card {
    min-height: clamp(200px, 24vw, 300px);
}

@media (max-width: 1200px) {
    .program-gallery {
        width: clamp(260px, 55vw, 460px);
    }
}

@media (max-width: 1024px) {
    .artistic-canvas {
        padding: 1.2rem clamp(0.4rem, 4vw, 1rem) clamp(2.5rem, 6vw, 4rem);
    }

    .program-station {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: column !important; /* Stack vertically on tablets and smaller */
    }
    
    /* Ensure station content appears first (above images) on tablets */
    .program-station-content {
        order: 1 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Ensure images appear below station content on tablets */
    .program-station-images {
        order: 2 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 1.5rem; /* Add spacing between content and images */
    }
    
    /* Override the odd/even flex-direction for tablets */
    .program-station:nth-of-type(odd),
    .program-station:nth-of-type(even) {
        flex-direction: column !important;
    }

    /* Make station containers flexbox columns to control order */
    .program-station-with-wonders-image,
    .program-station-with-image,
    .program-station-with-right-gallery,
    .program-station-with-books {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Stack all galleries below station cards on smaller screens */
    .program-gallery,
    .program-gallery-left,
    .program-gallery-right {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin-top: 1.5rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: flex-start;
        align-items: flex-end;
        order: 999 !important; /* Ensure gallery appears after all station content */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Prevent wrapping to ensure side by side */
        gap: 0.5rem;
        z-index: 1; /* Lower z-index to prevent blocking other elements */
        overflow: hidden; /* Prevent overflow */
        box-sizing: border-box;
    }
    
    /* Ensure station content appears before gallery */
    .program-station-with-wonders-image > .program-logo,
    .program-station-with-wonders-image > .person-container,
    .program-station-with-wonders-image > .program-title,
    .program-station-with-wonders-image > .tpd-cefr-level-display,
    .program-station-with-wonders-image > .program-description,
    .program-station-with-image > *:not(.bck-images-container),
    .program-station-with-right-gallery > *:not(.program-gallery),
    .program-station-with-books > *:not(.bb-books-container) {
        order: 1;
    }

    /* Side by side layout - taller image on left, shorter on right */
    .program-gallery .gallery-card {
        flex: 0 0 auto;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        min-width: 0;
        max-width: 48%;
        box-sizing: border-box;
    }
    
    /* First image (taller) on the left */
    .program-gallery .gallery-card:first-child {
        flex: 0 0 48%;
        max-width: 48%;
        max-height: 200px; /* Fixed max height to prevent overflow */
        align-self: flex-start;
    }
    
    /* Second image (shorter) on the right, aligned to bottom */
    .program-gallery .gallery-card:last-child {
        flex: 0 0 48%;
        max-width: 48%;
        max-height: 160px; /* Shorter than first */
        align-self: flex-end;
    }
    
    .program-gallery .gallery-card img {
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        background: transparent;
        border-radius: 0;
    }

    /* Stack BCK images container below station card */
    .bck-images-container {
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin-top: 1.5rem;
        margin-left: 0;
    }

    /* Stack BB books container below station card */
    .bb-books-container {
        position: static !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        margin-top: 1.25rem;
        width: 100%;
    }

    /* Ensure stations don't overflow */
    .program-station-with-image,
    .program-station-with-right-gallery,
    .program-station-with-wonders-image,
    .program-station-with-books {
        overflow: visible !important;
        position: relative;
        z-index: 1;
    }
    
    /* Ensure gallery doesn't block other elements */
    .program-gallery,
    .program-gallery-left,
    .program-gallery-right {
        position: relative;
        z-index: 0;
    }
    
    /* Set minimum font size for program description on mobile */
    .program-description {
        font-size: 14px !important;
    }
    
    /* Ensure Wonders, Big Book, Time Chronicles, Reach Higher, and Greatest Tales grids have small gaps on tablets and mobile */
    .program-station-images.wonders-books-grid,
    .program-station-images.bb-books-grid,
    .program-station-images.tc-books-grid,
    .program-station-images.rh-books-grid,
    .program-station-images.gt-books-grid {
        display: grid !important; /* Maintain grid layout on mobile */
        gap: 0.2rem !important; /* Small spacing on mobile too */
        row-gap: 0.2rem !important;
        column-gap: 0.2rem !important;
        flex: none !important; /* Reset flex on mobile */
        max-width: 100% !important; /* Full width only on mobile/tablet */
        width: 100% !important;
        max-height: 200px !important; /* Constrain height on mobile */
        height: auto !important; /* Adjust height for mobile */
    }
    
    .program-station-images.wonders-books-grid .gallery-card,
    .program-station-images.bb-books-grid .gallery-card,
    .program-station-images.tc-books-grid .gallery-card,
    .program-station-images.rh-books-grid .gallery-card,
    .program-station-images.gt-books-grid .gallery-card {
        padding: 0 !important;
        width: 100% !important;
        max-height: 100px !important; /* Constrain card height on mobile */
        height: auto !important;
        min-height: 60px !important; /* Minimum height for visibility */
    }
    
    .program-station-images.wonders-books-grid .gallery-card img,
    .program-station-images.bb-books-grid .gallery-card img,
    .program-station-images.tc-books-grid .gallery-card img,
    .program-station-images.rh-books-grid .gallery-card img,
    .program-station-images.gt-books-grid .gallery-card img {
        width: 100% !important;
        max-height: 100px !important; /* Constrain image height on mobile */
        height: auto !important;
        object-fit: contain !important; /* Prevent cutting off on mobile */
        border-radius: 8px !important; /* Ensure border-radius on mobile */
    }
    
    .program-station-images.gt-books-grid .gallery-card {
        border-radius: 8px !important; /* Ensure border-radius on mobile */
    }
    
    /* Florida Wonders image now matches others after resizing */
    .program-station-images.wonders-books-grid .gallery-card img[src*="Florida_Wonders"] {
        object-fit: contain !important; /* Same as other Wonders images */
    }
    
    /* Ensure images never overlap content on tablets and mobile */
    .program-station-content {
        z-index: 10 !important;
        position: relative;
    }
    
    .program-station-images {
        z-index: 1 !important;
        position: relative;
        overflow: hidden;
        max-height: 200px !important; /* Constrain all station images on mobile */
    }
    
    .program-station-images .gallery-card {
        max-height: 100px !important; /* Constrain gallery cards on mobile */
        height: auto !important;
    }
    
    .program-station-images .gallery-card img {
        max-height: 100px !important; /* Constrain images on mobile */
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
    }
}

@media (max-width: 640px) {
    .artistic-canvas {
        padding: 1rem 0.35rem 3rem;
    }

    .program-gallery {
        gap: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Keep images side by side even on small screens - more constrained */
    .program-gallery .gallery-card {
        flex: 0 0 48%;
        max-width: 48%;
    }
    
    .program-gallery .gallery-card:first-child {
        max-height: 180px; /* Smaller on very small screens */
    }
    
    .program-gallery .gallery-card:last-child {
        max-height: 140px; /* Smaller on very small screens */
    }
    
    .program-gallery .gallery-card img {
        max-width: 100%;
        max-height: 100%;
    }

    .bb-books-container {
        grid-template-columns: repeat(3, minmax(80px, 1fr));
        width: 100%;
        gap: 0 !important; /* No gap on small mobile */
    }
    
    /* Ensure Wonders, Big Book, Time Chronicles, Reach Higher, and Greatest Tales grids have small gaps on small mobile */
    .program-station-images.wonders-books-grid,
    .program-station-images.bb-books-grid,
    .program-station-images.tc-books-grid,
    .program-station-images.rh-books-grid,
    .program-station-images.gt-books-grid {
        display: grid !important; /* Maintain grid layout on small mobile */
        gap: 0.2rem !important; /* Small spacing on small mobile too */
        row-gap: 0.2rem !important;
        column-gap: 0.2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 180px !important; /* Smaller constraint on very small screens */
        height: auto !important;
    }
    
    .program-station-images.wonders-books-grid .gallery-card,
    .program-station-images.bb-books-grid .gallery-card,
    .program-station-images.tc-books-grid .gallery-card,
    .program-station-images.rh-books-grid .gallery-card,
    .program-station-images.gt-books-grid .gallery-card {
        padding: 0 !important;
        width: 100% !important;
        max-height: 80px !important; /* Smaller cards on very small screens */
        height: auto !important;
        min-height: 50px !important; /* Minimum height for visibility */
    }
    
    .program-station-images.wonders-books-grid .gallery-card img,
    .program-station-images.bb-books-grid .gallery-card img,
    .program-station-images.tc-books-grid .gallery-card img,
    .program-station-images.rh-books-grid .gallery-card img,
    .program-station-images.gt-books-grid .gallery-card img {
        width: 100% !important;
        max-height: 80px !important; /* Smaller images on very small screens */
        height: auto !important;
        object-fit: contain !important; /* Prevent cutting off on small mobile */
        border-radius: 8px !important; /* Ensure border-radius on small mobile */
    }
    
    .program-station-images.gt-books-grid .gallery-card {
        border-radius: 8px !important; /* Ensure border-radius on small mobile */
    }
    
    /* Florida Wonders image now matches others after resizing */
    .program-station-images.wonders-books-grid .gallery-card img[src*="Florida_Wonders"] {
        object-fit: contain !important; /* Same as other Wonders images */
    }
    
    /* Ensure font size is at least 14px on small mobile */
    .program-description {
        font-size: 14px !important;
    }
    
    /* Additional constraints for very small screens */
    .program-station-images {
        max-height: 180px !important; /* Smaller constraint on very small screens */
    }
    
    .program-station-images .gallery-card:not(.wonders-books-grid .gallery-card):not(.bb-books-grid .gallery-card):not(.tc-books-grid .gallery-card):not(.rh-books-grid .gallery-card):not(.gt-books-grid .gallery-card) {
        max-height: 80px !important; /* Smaller cards on very small screens */
    }
    
    .program-station-images .gallery-card:not(.wonders-books-grid .gallery-card):not(.bb-books-grid .gallery-card):not(.tc-books-grid .gallery-card):not(.rh-books-grid .gallery-card):not(.gt-books-grid .gallery-card) img {
        max-height: 80px !important; /* Smaller images on very small screens */
    }
}

/* Big Book station with books on the left */
.program-station-with-books {
    overflow: visible !important;
}

.bb-books-container {
    position: absolute;
    right: calc(100% + clamp(1.25rem, 3vw, 2.5rem)); /* Responsive gap: consistent across screen sizes */
    top: clamp(1.25rem, 3vw, 2.5rem); /* Align with station padding top */
    transform: none; /* Remove vertical centering */
    display: grid;
    grid-template-columns: repeat(4, minmax(95px, 1fr));
    grid-auto-rows: minmax(115px, auto);
    gap: 0; /* No gap - books should be touching */
    width: clamp(425px, 50vw, 700px);
    z-index: 5;
}

.bb-book {
    width: 100%;
    height: auto;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, z-index 0s;
    margin-left: 0;
    border-radius: 8px;
}

.bb-book:hover {
    transform: scale(1.15);
    z-index: 10;
}

/* Responsive book sizing and gap adjustments */
@media (max-width: 1200px) and (min-width: 1025px) {
    .bb-books-container {
        width: clamp(360px, 60vw, 580px);
        gap: 8px;
        right: calc(100% + clamp(1.25rem, 3vw, 2.5rem)); /* Medium gap for tablets like iPad Pro horizontal */
    }
}

/* Smaller tablets - slightly smaller gap */
@media (max-width: 1024px) and (min-width: 769px) {
    .bb-books-container {
        width: clamp(360px, 60vw, 580px);
        gap: 8px;
        right: calc(100% + clamp(1rem, 2.5vw, 2rem)); /* Smaller gap for smaller tablets */
    }
}

@media (max-width: 768px) {
    /* Ensure BB books container is stacked on mobile */
    .bb-books-container {
        position: static !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        grid-template-columns: repeat(3, minmax(80px, 1fr)); /* 3 books per row on mobile */
        width: 100%;
        margin-top: 1.25rem;
        gap: 0 !important; /* No gap on mobile */
    }
    
    .bb-book {
        transform-origin: center;
    }

    /* Ensure BCK images are stacked on mobile */
    .bck-images-container {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 1.5rem;
    }
}

/* Program logos in top-LEFT corner (swapped) */
.program-logo {
    position: absolute;
    top: 2rem; /* 2rem from top */
    left: clamp(0.5rem, 1vw, 1rem);
    width: clamp(60px, 8vw, 100px);
    height: auto;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.program-logo:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Remove this - will update the existing person-container below */

/* TC logo is 60% smaller */
.program-logo-tc {
    width: clamp(36px, 4.8vw, 60px); /* 60% of original size */
}

/* TC logo inline version */
.program-logo-inline.program-logo-tc {
    width: clamp(36px, 4.8vw, 60px); /* 60% of original size */
}

.program-logo-tc:hover {
    transform: scale(1.1);
}

.cefr-blob.small {
    width: 12px;
    height: 14px;
    border-radius: 6px 8px 6px 4px;
    border: 1px solid var(--color-text);
    opacity: 0.4;
    display: inline-block;
}

.cefr-blob.small.active {
    opacity: 1;
}

.cefr-blob.small.a1 { background-color: #6ee7b7; }
.cefr-blob.small.a2 { background-color: #a7f3d0; }
.cefr-blob.small.b1 { background-color: #fcd34d; }
.cefr-blob.small.b2 { background-color: #fde68a; }
.cefr-blob.small.c1 { background-color: #f87171; }
.cefr-blob.small.c2 { background-color: #fca5a5; }

.tpd-cefr-text {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-detail);
    font-weight: 600;
    color: var(--color-text);
    margin-left: 4px;
}

.person-container {
    width: 80px;
    height: 70px;
    position: absolute;
    bottom: clamp(0.5rem, 1vw, 1rem); /* Bottom-right corner */
    right: clamp(0.5rem, 1vw, 1rem);
    z-index: 10;
}

.sketch-person {
    position: relative; /* Changed from absolute */
    bottom: 0;
    left: 0;
    stroke: var(--color-text);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.program-level-tag {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-detail);
    font-weight: 600;
    color: var(--color-paper);
    background-color: var(--color-text);
    border-radius: 3px;
    padding: 2px 6px;
    display: inline-block;
    margin-left: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

#sketch-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
    z-index: 1000;
}

#sketch-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
}

#sketch-modal-content {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    max-width: 500px;
    width: 100%;
    padding: 2rem;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
    font-family: 'Inter', sans-serif;
}

#sketch-modal.is-open #sketch-modal-content {
    transform: scale(1);
}

.game-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: rgba(255, 0, 0, 0.9);
    border: none;
    border-radius: 0 0 0 12px;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.game-close-btn:hover {
    background: rgba(200, 0, 0, 1);
    transform: scale(1.05);
}

#sketch-modal-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin-bottom: 1rem;
    color: #111827;
}

#sketch-modal-description p {
    font-size: var(--font-size-text);
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1em;
}

@media (max-width: 768px) {
    .artistic-canvas {
        padding: clamp(1rem, 3vw, 2rem);
        padding-bottom: clamp(3rem, 6vw, 4rem);
    }
    
    .program-station {
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: clamp(2rem, 4vw, 3rem);
        text-align: center;
        flex-direction: column !important; /* Stack vertically on mobile */
        align-items: stretch !important; /* Full width on mobile */
    }
    
    /* Ensure station content appears first (above images) */
    .program-station-content {
        order: 1 !important;
        max-width: 100% !important; /* Full width on mobile */
        width: 100% !important;
    }
    
    /* Ensure images appear below station content */
    .program-station-images {
        order: 2 !important;
        max-width: 100% !important; /* Full width on mobile */
        width: 100% !important;
        margin-top: 1.5rem; /* Add spacing between content and images */
    }
    
    /* Override the odd/even flex-direction for mobile */
    .program-station:nth-of-type(odd),
    .program-station:nth-of-type(even) {
        flex-direction: column !important;
    }
    
    .person-container {
        margin: 0 auto 10px auto;
    }
    
    .learning-network-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem; /* Minimal gap on mobile */
        margin-bottom: 0.25rem; /* Very minimal gap */
    }
    
    .learning-network-title {
        font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
        margin: 1rem 1rem 0 1rem; /* Remove bottom margin */
    }
    
    .header-stops-container {
        padding-bottom: 0; /* Remove padding on mobile too */
    }
    
    /* Inline logo on mobile */
    .program-title-with-logo {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .program-logo-inline {
        margin-left: 0; /* Remove auto margin on mobile */
        margin-top: 0.5rem; /* Add small top margin on mobile if wrapping */
    }
    
    .header-stops-container {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-left: 1rem;
        padding-bottom: 0;
    }
    
    .medium-stop {
        width: 60px;
        height: 60px;
        border: 6px solid;
    }
    
    .medium-stop .stop-code {
        font-size: 18px;
    }
}

/* Remove padding from p-4 class */
.p-4 {
    padding: 0 !important;
}