/* Free Resource Page Styles */
/* Based on secondary-info.css structure */

/* Resource Type Badge - Light Grey Background, Rounded Corners */
.resource-type-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    width: fit-content;
    margin-bottom: 0.5rem;
    color: #374151;
    background-color: #f3f4f6;
    border: none;
    border-radius: 0.5rem;
    box-shadow: none;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
}

/* Improved Sidebar Title for Resource Pages */
.free-resource-page .sidebar-title {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

.free-resource-page .sidebar-description {
    margin-bottom: 0.75rem;
    margin-top: 0;
}

/* Remove default sidebar gap and add manual spacing */
.free-resource-page .sidebar {
    gap: 0 !important;
}

/* Override default info-section spacing */
.free-resource-page .info-section {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-bottom: none;
}

/* Less gap between main content sections */
.free-resource-page .content-section {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.free-resource-page .content-section:first-of-type {
    margin-top: 0;
}

/* Keep anchor targets in view when using Quick Links / See all topics (clear fixed header) */
.free-resource-page #resource-overview,
.free-resource-page #resource-details,
.free-resource-page #how-to-use,
.free-resource-page #topics-covered,
.free-resource-page #curriculum-links,
.free-resource-page #qgen-how-it-works,
.free-resource-page #overview-pdfs,
.free-resource-page #showcase-cta,
.free-resource-page #other-qg-samples {
    scroll-margin-top: 5rem;
}

/* Curriculum Links – grey card */
.free-resource-page .curriculum-links-card {
    background-color: #f3f4f6;
    border-radius: 0.75rem;
    padding: 2rem;
    border: 1px solid #e5e7eb;
}

.free-resource-page .curriculum-links-card .section-title {
    margin-top: 0;
}

/* Topics Covered – slightly smaller heading and plain list text */
.free-resource-page #topics-covered .section-title {
    font-size: 1.5rem;
}

.free-resource-page .topics-covered-list {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-primary, #374151);
}

/* Manual spacing for each sidebar section */
.free-resource-page .resource-download-button {
    margin-bottom: 1rem;
}

.free-resource-page .resource-info-section {
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
    margin-top: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.free-resource-page .resource-info-section .sidebar-stats-row {
    margin-top: 0.75rem;
}

.free-resource-page .sidebar-topics-section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-top: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.free-resource-page .sidebar-topics-section .info-heading {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.04em;
    margin-bottom: 0.625rem;
    margin-top: 0;
}

.sidebar-topics-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #374151;
    font-weight: 500;
}

.sidebar-topics-list li {
    margin-bottom: 0.375rem;
    padding-left: 1.25rem;
    position: relative;
}

.sidebar-topics-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #6b7280;
}

.sidebar-topics-list li:last-child {
    margin-bottom: 0;
}

.sidebar-topics-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidebar-topics-more:hover {
    color: #111827;
    text-decoration: none;
}

.sidebar-topics-more::after {
    content: '\2192';
    font-size: 0.9em;
    margin-left: 0.2em;
}

.free-resource-page .subscription-card-section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-top: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Subscription Card in Sidebar */
.subscription-card {
    background-color: #f3f4f6;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 0;
    border: 1px solid #e5e7eb;
}

.subscription-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.unlock-icon {
    flex-shrink: 0;
    color: #6b7280;
    margin-top: 0.125rem;
}

.subscription-card-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
    margin: 0;
}

.subscription-card-text strong {
    color: #111827;
    font-weight: 600;
}

.subscription-card-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #e5e7eb;
    color: #374151;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: 1px solid #d1d5db;
}

.subscription-card-button:hover {
    background-color: #d1d5db;
    color: #111827;
}

/* Sidebar Download Button - Restyled */
.resource-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    max-width: fit-content;
    padding: 0.875rem 1.5rem;
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    margin-top: 0.5rem;
    border: none;
    box-sizing: border-box;
}

.resource-download-button:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

.resource-download-button svg {
    flex-shrink: 0;
}

/* Carousel Display - Single Image (No Arrows/Thumbnails) */
.free-resource-page .carousel-section {
    margin-bottom: 3rem;
}

.free-resource-page .carousel-main {
    margin-bottom: 0;
}

.free-resource-page .carousel-display {
    height: 500px;
}

/* No grid background on carousel */
.free-resource-page .carousel-display::before {
    display: none !important;
}

/* Primary pages - Green background for carousel */
body.free-resource-page.primary-page .carousel-display,
.free-resource-page.primary-page .carousel-display {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.free-resource-page.gcse-page .carousel-display {
    background: linear-gradient(135deg, #ffdf60 0%, #ffbe1d 100%) !important;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Keystage "All" – blue carousel badge (not green) */
.free-resource-page.all-keystage-page .carousel-badge {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.free-resource-page.all-keystage-page .carousel-badge:hover {
    background-color: #1d4ed8;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    color: #ffffff;
}

.free-resource-page.secondary-page .carousel-badge {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.free-resource-page.secondary-page .carousel-badge:hover {
    background-color: #1d4ed8;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    color: #ffffff;
}
.free-resource-page.secondary-page .how-to-step .step-number {
    background-color: #2563eb;
}
.free-resource-page.secondary-page .how-to-step:not(:last-child)::after {
    background-color: #93c5fd;
}

.free-resource-page.gcse-page .carousel-badge {
    background-color: #d89c00;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(216, 156, 0, 0.35);
}
.free-resource-page.gcse-page .carousel-badge:hover {
    background-color: #b8860b;
    box-shadow: 0 6px 16px rgba(216, 156, 0, 0.4);
    color: #ffffff;
}
.free-resource-page.gcse-page .how-to-step .step-number {
    background-color: #2563eb;
}
.free-resource-page.gcse-page .how-to-step:not(:last-child)::after {
    background-color: #93c5fd;
}

/* L2 Further Maths - pink carousel and badge */
.free-resource-page.l2fm-page .carousel-display {
    background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 100%) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.free-resource-page.l2fm-page .carousel-badge {
    background-color: #db2777;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.35);
}
.free-resource-page.l2fm-page .carousel-badge:hover {
    background-color: #be185d;
    box-shadow: 0 6px 16px rgba(219, 39, 119, 0.4);
    color: #ffffff;
}

/* A Level - red carousel and badge */
.free-resource-page.alevel-page .carousel-display {
    background: linear-gradient(135deg, #fca5a5 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.free-resource-page.alevel-page .carousel-badge {
    background-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.35);
}
.free-resource-page.alevel-page .carousel-badge:hover {
    background-color: #991b1b;
    box-shadow: 0 6px 16px rgba(185, 28, 28, 0.4);
    color: #ffffff;
}
.free-resource-page.alevel-page .how-to-step .step-number {
    background-color: #2563eb;
}
.free-resource-page.alevel-page .how-to-step:not(:last-child)::after {
    background-color: #93c5fd;
}

/* A Level revision notes - red carousel and badge */
.free-resource-page.alevel-notes-page .carousel-display {
    background: linear-gradient(135deg, #fca5a5 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.free-resource-page.alevel-notes-page .carousel-badge {
    background-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.35);
}
.free-resource-page.alevel-notes-page .carousel-badge:hover {
    background-color: #991b1b;
    box-shadow: 0 6px 16px rgba(185, 28, 28, 0.4);
    color: #ffffff;
}

/* Times table grid blank templates – blue carousel and badge */
.free-resource-page.times-table-grid-page .carousel-display {
    background: linear-gradient(135deg, #93c5fd 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.free-resource-page.times-table-grid-page .carousel-badge {
    background-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.free-resource-page.times-table-grid-page .carousel-badge:hover {
    background-color: #1e40af;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    color: #ffffff;
}

.carousel-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.carousel-image-link .carousel-image {
    display: block;
}

/* Carousel Badge - Top Right */
.carousel-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: #059669;
    color: #ffffff;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.carousel-badge:hover {
    background-color: #047857;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
    color: #ffffff;
}

.carousel-badge-icon {
    color: #ffffff;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Resource Description Section */
.resource-description-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text-primary);
}

.resource-description-content p {
    margin-bottom: 1rem;
}

/* How to Use Section - Restyled */
.how-to-use-content {
    margin-top: 2rem;
}

.how-to-use-intro {
    margin: 0 0 1.5rem 0;
    color: var(--color-text-primary, #374151);
    line-height: 1.6;
}

.extra-ideas-block {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.extra-ideas-block .extra-ideas-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.extra-ideas-block p {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text-primary, #374151);
}

.how-to-use-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.how-to-step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0;
    position: relative;
}

.how-to-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1.125rem;
    top: 3rem;
    bottom: -2rem;
    width: 2px;
    background-color: #93c5fd;
}

.step-number {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.9375rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.step-content {
    flex: 1;
    padding-top: 0.125rem;
}

.step-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.step-description {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Unlock Problem Solving Section */
.unlock-problem-solving-section {
    margin: 3rem 0;
    padding: 2.5rem;
    background-color: #f9fafb;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
}

.unlock-problem-solving-header {
    text-align: center;
    margin-bottom: 2rem;
}

.unlock-problem-solving-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.unlock-problem-solving-description {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.stacked-images-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    height: 180px;
}

.stacked-images {
    position: relative;
    width: 520px;
    height: 180px;
}

.stacked-image {
    position: absolute;
    width: 240px;
    height: auto;
    filter: blur(1px);
    opacity: 1;
    border-radius: 0.5rem;
    box-shadow: none;
}

/* Mental arithmetic: only Number Up + Times Table Square, both blurred */
.unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image {
    filter: blur(2px);
    opacity: 1;
}

.unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image-2 {
    width: 200px;
}

.unlock-problem-solving-section.mental-arithmetic-unlock .stacked-images {
    width: 380px;
}

.unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image-1 {
    left: 0;
    top: 0;
    transform: rotate(-3deg);
}

.unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image-2 {
    left: 180px;
    top: 12px;
    transform: rotate(2deg);
}

.unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image-3 {
    display: none;
}

/* GCSE unlock: only 4 questions + relay (two stacked images) */
.stacked-images.gcse-unlock-two-images {
    width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.stacked-images.gcse-unlock-two-images .stacked-image-1 {
    left: 0;
    top: 0;
    transform: rotate(-3deg);
}

.stacked-images.gcse-unlock-two-images .stacked-image-2 {
    left: 180px;
    top: 12px;
    transform: rotate(2deg);
}

.stacked-image-1 {
    top: 0;
    left: 0;
    z-index: 1;
    transform: rotate(-3deg);
}

.stacked-image-2 {
    top: 12px;
    left: 140px;
    z-index: 2;
    transform: rotate(2deg);
}

.stacked-image-3 {
    top: 24px;
    left: 280px;
    z-index: 3;
    transform: rotate(-2deg);
}

.stacked-lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: none;
    border: none;
    box-shadow: none;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: none;
}

.stacked-lock-overlay svg {
    color: #6b7280;
    width: 72px;
    height: 72px;
    stroke-width: 2.5;
}

.unlock-problem-solving-cta {
    text-align: center;
}

.unlock-problem-solving-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.625rem;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    position: relative;
}

.unlock-button-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.unlock-button-icon-unlocked {
    display: none;
}

.unlock-problem-solving-button:hover .unlock-button-icon-locked {
    display: none;
}

.unlock-problem-solving-button:hover .unlock-button-icon-unlocked {
    display: block;
}

.unlock-problem-solving-button:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
    color: #ffffff;
}

/* Keep button text visible on hover (only icon should change) */
.unlock-problem-solving-button .unlock-button-text,
.unlock-problem-solving-button:hover .unlock-button-text {
    opacity: 1;
    visibility: visible;
}

/* Resource Features Section */
.resource-features-section {
    background-color: #f9fafb;
    padding: 2rem;
    border-radius: 1rem;
    margin: 2rem 0;
}

.resource-features-section .section-title {
    margin-top: 0;
}

/* Benefits list – native bullets so they don’t render as strange characters */
.free-resource-page .benefits-list {
    list-style: disc;
    padding-left: 1.5rem;
}

.free-resource-page .benefits-list li::before {
    content: none !important;
    display: none !important;
}

.free-resource-page .benefits-list li {
    padding-left: 0.25rem;
}

.free-resource-page .qg-resource-intro-list li {
    margin-bottom: 0.5rem;
    line-height: 1.55;
}

.free-resource-page .qg-resource-intro-list li:last-child {
    margin-bottom: 0;
}

/* Overview PDFs & other QG sample links — plain grey text links */
.free-resource-page .qg-link-list {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
    max-width: 42rem;
}

.free-resource-page .qg-link-list li {
    padding-left: 0.25rem;
    margin-bottom: 0.35rem;
}

.free-resource-page .qg-link-list li::before {
    content: none !important;
    display: none !important;
}

.free-resource-page .qg-link-list li:last-child {
    margin-bottom: 0;
}

.free-resource-page .qg-link-list a {
    color: #6b7280;
    text-decoration: underline;
    text-decoration-color: #d1d5db;
    text-underline-offset: 0.15em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.free-resource-page .qg-link-list a:hover {
    color: #374151;
    text-decoration-color: #9ca3af;
}

.free-resource-page .qg-link-list a:focus-visible {
    outline: 2px solid #9ca3af;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Other QG samples — same boxed style as sidebar quick links */
.free-resource-page #other-qg-samples .qg-other-qg-link-boxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 32rem;
}

.free-resource-page #other-qg-samples .qg-other-qg-link-boxes .sidebar-link-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    white-space: normal;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    line-height: 1.4;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}

.free-resource-page #other-qg-samples .qg-other-qg-link-boxes .sidebar-link-button:hover {
    background-color: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}

/* Related Resources Section */
.related-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.related-resource-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-primary);
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

.related-resource-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

.related-resource-image {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background-color: #f9fafb;
    overflow: hidden;
}

.related-resource-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-resource-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.related-resource-badge.primary {
    background-color: #dbeafe;
    color: #1e40af;
}

.related-resource-badge.secondary {
    background-color: #e0e7ff;
    color: #3730a3;
}

.related-resource-badge.gcse {
    background-color: #fef3c7;
    color: #92400e;
}

.related-resource-badge.alevel {
    background-color: #fce7f3;
    color: #9f1239;
}

.related-resource-badge.l2fm {
    background-color: #e9d5ff;
    color: #6b21a8;
}

.related-resource-badge.default {
    background-color: #f3f4f6;
    color: #374151;
}

.related-resource-content {
    padding: 1.25rem;
}

.related-resource-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.related-resource-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.view-all-resources-link {
    text-align: center;
    margin-top: 2rem;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background-color: transparent;
    color: var(--color-primary);
    text-decoration: none;
    border: 2px solid var(--color-primary);
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.view-all-btn:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .resource-header-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .resource-header-image {
        order: -1;
        min-height: 250px;
    }
    
    .resource-title {
        font-size: 2rem;
    }
    
    .related-resources-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
    }
    
    .free-resource-page .carousel-display {
        height: 400px;
    }

    /* Mobile: carousel above sidebar (above Quick Links) */
    .free-resource-page .page-container {
        display: flex;
        flex-direction: column;
    }

    .free-resource-page .main-content3 {
        display: contents;
    }

    .free-resource-page .carousel-section {
        order: -1;
    }
}

@media (max-width: 768px) {
    .carousel-badge {
        display: none;
    }

    .resource-header-section {
        padding: 1.5rem 0;
        margin-bottom: 2rem;
    }
    
    .resource-title {
        font-size: 1.75rem;
    }
    
    .resource-subtitle {
        font-size: 1rem;
    }
    
    .resource-meta {
        font-size: 0.8125rem;
    }
    
    .resource-download-btn {
        width: 100%;
        justify-content: center;
    }
    
    .how-to-step {
        gap: 1rem;
    }
    
    .how-to-step:not(:last-child)::after {
        left: 1rem;
        top: 2.5rem;
    }
    
    .step-number {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }
    
    .step-title {
        font-size: 1rem;
    }
    
    .step-description {
        font-size: 0.875rem;
    }
    
    .related-resources-grid {
        grid-template-columns: 1fr;
    }
    
    .resource-features-section {
        padding: 1.5rem;
    }
    
    .free-resource-page .carousel-display {
        height: 350px;
    }
    
    .unlock-problem-solving-section {
        padding: 2rem 1.5rem;
    }
    
    .unlock-problem-solving-title {
        font-size: 1.25rem;
    }
    
    .stacked-images-container {
        height: 150px;
    }
    
    .stacked-images {
        width: 100%;
        max-width: 280px;
        height: 150px;
        margin: 0 auto;
    }
    
    /* Single centered image on mobile instead of 3 stacked */
    .stacked-image-2,
    .stacked-image-3 {
        display: none;
    }
    
    /* Mental arithmetic: keep both Number Up and Times Table Square visible */
    .unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image-2 {
        display: block;
    }
    
    /* GCSE unlock: keep both 4 questions and relay visible */
    .stacked-images.gcse-unlock-two-images .stacked-image-2 {
        display: block;
    }
    
    .stacked-images.gcse-unlock-two-images .stacked-image-1 {
        left: 20%;
        transform: translateX(0) rotate(-3deg);
    }
    
    .stacked-images.gcse-unlock-two-images .stacked-image-2 {
        left: 50%;
        transform: translateX(-50%) rotate(2deg);
    }
    
    .stacked-images.gcse-unlock-two-images {
        width: 100%;
        max-width: 320px;
    }
    
    .stacked-image {
        width: 200px;
    }
    
    .stacked-image-1 {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }
    
    .unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image-1 {
        left: 20%;
        transform: translateX(0) rotate(-3deg);
    }
    
    .unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image-2 {
        left: 50%;
        transform: translateX(-50%) rotate(2deg);
    }
    
    .unlock-problem-solving-section.mental-arithmetic-unlock .stacked-images {
        width: 100%;
        max-width: 320px;
    }
    
    .stacked-lock-overlay svg {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .resource-title {
        font-size: 1.5rem;
    }
    
    .resource-header-image {
        min-height: 200px;
        padding: 1.5rem;
    }
    
    .free-resource-page .carousel-display {
        height: 300px;
    }
    
    .unlock-problem-solving-section {
        padding: 1.5rem 1rem;
    }
    
    .unlock-problem-solving-title {
        font-size: 1.125rem;
    }
    
    .unlock-problem-solving-description {
        font-size: 0.9375rem;
    }
    
    .stacked-images-container {
        height: 120px;
    }
    
    .stacked-images {
        width: 100%;
        max-width: 240px;
        height: 120px;
        margin: 0 auto;
    }
    
    .stacked-image {
        width: 160px;
    }
    
    .stacked-image-1 {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .unlock-problem-solving-section.mental-arithmetic-unlock .stacked-image-2 {
        display: block;
    }
    
    .stacked-images.gcse-unlock-two-images .stacked-image-2 {
        display: block;
    }
    
    .stacked-images.gcse-unlock-two-images .stacked-image-1 {
        left: 15%;
        transform: translateX(0) rotate(-3deg);
    }
    
    .stacked-images.gcse-unlock-two-images .stacked-image-2 {
        left: 50%;
        transform: translateX(-50%) rotate(2deg);
    }
    
    .stacked-images.gcse-unlock-two-images {
        max-width: 280px;
    }
    
    .stacked-lock-overlay svg {
        width: 52px;
        height: 52px;
    }
    
    .unlock-problem-solving-button {
        padding: 0.625rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* —— Question Generator landing (secondary) —— */
.free-resource-page .free-resource-qgen-features {
    margin: 2.5rem 0;
    padding: 2rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.free-resource-page .free-resource-qgen-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.free-resource-page .free-resource-qgen-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.free-resource-page .free-resource-qgen-item-reverse .free-resource-qgen-text {
    order: 2;
}

.free-resource-page .free-resource-qgen-item-reverse .free-resource-qgen-visual {
    order: 1;
}

.free-resource-page .free-resource-qgen-step {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #2563eb;
    margin: 0 0 0.5rem 0;
}

.free-resource-page .free-resource-qgen-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--color-text-primary, #111827);
}

.free-resource-page .free-resource-qgen-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary, #4b5563);
    margin: 0 0 0.75rem 0;
}

.free-resource-page .free-resource-qgen-description .level-overview-link {
    color: #6b7280;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: #d1d5db;
    text-underline-offset: 0.15em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.free-resource-page .free-resource-qgen-description .level-overview-link:hover {
    color: #374151;
    text-decoration-color: #9ca3af;
}

.free-resource-page .free-resource-qgen-tagline {
    margin: 0;
}

.free-resource-page .free-resource-qgen-tag {
    display: inline-block;
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
    background: #f3f4f6;
    color: #374151;
    border-radius: 999px;
    font-weight: 500;
}

.free-resource-page .free-resource-qgen-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.free-resource-page .free-resource-qgen-visual img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
}

.free-resource-page .free-resource-qgen-try {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2.75rem;
    padding: 1.5rem 1.5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.free-resource-page .free-resource-qgen-try-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.75rem;
    min-width: 10.5rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 0.5rem;
    background: #2563eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.free-resource-page .free-resource-qgen-try-button:hover {
    color: #fff;
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
    transform: translateY(-1px);
}

.free-resource-page .free-resource-qgen-try-button:active {
    transform: translateY(0);
    background: #1e40af;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.free-resource-page .free-resource-qgen-try-button:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.free-resource-page .free-resource-showcase-block {
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin: 2rem 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
}

.free-resource-page .free-resource-showcase-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--color-text-primary, #111827);
}

.free-resource-page .free-resource-showcase-subtext {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text-secondary, #4b5563);
    max-width: 42rem;
    margin: 0 auto 1.5rem;
}

.free-resource-page .free-resource-showcase-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.free-resource-page .free-resource-showcase-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    background: #26262d;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.free-resource-page .free-resource-showcase-cta-primary:hover {
    background: #3161ff;
    color: #fff;
}

.free-resource-page .free-resource-showcase-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary, #111827);
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.free-resource-page .free-resource-showcase-cta-secondary:hover {
    border-color: #3161ff;
    color: #3161ff;
}

.free-resource-page .topics-covered-intro {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary, #4b5563);
    margin: 0 0 1.5rem 0;
}

.free-resource-page .topics-covered-placeholder {
    margin: 0;
    padding: 1rem 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #6b7280;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 0.5rem;
}

.free-resource-page .qg-topic-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.free-resource-page .qg-topic-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.free-resource-page .qg-topic-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    color: var(--color-text-primary, #111827);
}

.free-resource-page .qg-topic-card-list {
    margin: 0;
    padding: 0 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-secondary, #4b5563);
    list-style-type: disc;
}

.free-resource-page .qg-topic-card-list li {
    margin-bottom: 0.35rem;
}

.free-resource-page .qg-topic-card-list li:last-child {
    margin-bottom: 0;
}

/* Topic structure lists — two-column formatted list */
.free-resource-page .qg-topic-card-structures .qg-topic-card-title {
    margin-bottom: 0.75rem;
}

.free-resource-page .qg-structure-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.free-resource-page .qg-structure-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.free-resource-page .qg-structure-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.4;
    flex: 1 1 8rem;
    min-width: 0;
}

.free-resource-page .qg-structure-count {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .free-resource-page .qg-structure-list {
        grid-template-columns: 1fr;
    }
}

.free-resource-page .topics-covered-footer {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary, #4b5563);
}

@media (max-width: 900px) {
    .free-resource-page .free-resource-qgen-item,
    .free-resource-page .free-resource-qgen-item.free-resource-qgen-item-reverse {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .free-resource-page .free-resource-qgen-item-reverse .free-resource-qgen-text,
    .free-resource-page .free-resource-qgen-item-reverse .free-resource-qgen-visual {
        order: unset;
    }

    .free-resource-page .free-resource-qgen-try {
        margin-top: 2rem;
        padding: 1.5rem 1rem;
    }

    .free-resource-page .free-resource-qgen-try-button {
        width: 100%;
        max-width: 20rem;
    }
}