/* category-card.css — the CategoryCard component (Server/Components/CustomComponents/CategoryCard.razor)
   sheet. EXTRACTED VERBATIM 2026-08-24 (qa-public-O5, publish session 11) from the in-body style
   block the component carried at lines 26-253: a component's render fragment ships once PER
   INSTANCE, so a page rendering N category cards shipped N identical 6.0 KB copies of this CSS
   in every SSR payload. Loaded from App.razor AFTER rently-home.css and before the scoped
   bundle — the in-body block used to render in the document BODY, later in source order than
   every head sheet, so late-of-links keeps its cascade wins (the S12-02 lesson recorded in
   App.razor) without inflating specificity. Razor at-escapes un-escaped mechanically; no other
   transformation. */

    /* Base Card Styles */
    .category-card {
        padding: 4px; /* White interior padding */
        width: 100%;
        height: 100%;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-radius: 12px;
        aspect-ratio: 16/9;
        background-color: #fff; /* White background for padding effect */
        box-shadow: 3px 3px 8px rgb(0 0 0 / 15%); /* Shadow underneath and to the right */
    }

        .category-card:hover {
            transform: translateY(-4px);
            box-shadow: 5px 5px 12px rgb(0 0 0 / 20%); /* Enhanced shadow on hover */
        }

    /* Inner container with blue background */
    .category-card-inner {
        width: 100%;
        height: 100%;
        background-color: #35a0ae; /* Rently blue background */
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    /* Image Styles */
    .category-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .category-card:hover .category-card-image {
        transform: scale(1.05);
    }

    /* Content Styles - No vignette/overlay */
    .category-card .category-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px;
        color: white;
        transition: padding 0.2s ease;

        /* No gradient overlay - clean look */
    }

    .category-card:hover .category-content {
        padding-bottom: 20px;
    }

    .category-card .category-name {
        color: white;
        font-weight: 600;
        margin: 0;
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        text-shadow: 0 2px 4px rgb(0 0 0 / 30%); /* Softer shadow */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-count {
        color: rgb(255 255 255 / 95%);
        font-size: 0.75rem !important;
        margin-top: 4px;
        text-shadow: 0 1px 2px rgb(0 0 0 / 30%); /* Softer shadow */
    }

    /* Desktop Styles (default) */
    @media (min-width: 1280px) {
        .category-card {
            aspect-ratio: 16/9;
        }
    }

    /* Tablet Styles */
    @media (max-width: 959px) {
        .category-card {
            aspect-ratio: 4/3;
            padding: 3px; /* Slightly smaller padding on tablets */
        }

        .category-card .category-content {
            padding: 12px;
        }

        .category-card:hover .category-content {
            padding-bottom: 16px;
        }

        .category-card .category-name {
            font-size: 1.125rem !important;
        }
    }

    /* Mobile Styles */
    @media (max-width: 599px) {
        .category-card {
            aspect-ratio: 16/10;
            padding: 3px; /* Smaller padding on mobile */
            box-shadow: 2px 2px 6px rgb(0 0 0 / 12%); /* Lighter shadow on mobile */
        }

            .category-card:hover {
                transform: none;
                box-shadow: 2px 2px 6px rgb(0 0 0 / 12%);
            }

            .category-card:active {
                transform: scale(0.98);
            }

            .category-card:hover .category-card-image {
                transform: none;
            }

        .category-card .category-content {
            padding: 10px;
        }

        .category-card:hover .category-content {
            padding-bottom: 10px;
        }

        .category-card .category-name {
            font-size: 1rem !important;
            font-weight: 600;
            -webkit-line-clamp: 1;
        }

        .item-count {
            font-size: 0.6875rem !important;
        }
    }

    /* Small Mobile Styles */
    @media (max-width: 359px) {
        .category-card {
            aspect-ratio: 3/2;
            padding: 2px; /* Minimal padding on very small screens */
        }

        .category-card .category-content {
            padding: 8px;
        }

        .category-card .category-name {
            font-size: 0.875rem !important;
        }
    }

    /* Touch-friendly adjustments */
    @media (hover: none) and (pointer: coarse) {
        .category-card:hover {
            transform: none;
        }

            .category-card:hover .category-card-image {
                transform: none;
            }

            .category-card:hover .category-content {
                padding-bottom: 16px;
            }

        .category-card:active {
            transform: scale(0.98);
            opacity: 0.9;
        }
    }

    /* High contrast mode */
    @media (prefers-contrast: more) {
        .category-card {
            border: 2px solid currentcolor;
        }

        .category-card-inner {
            background-color: #2a7a86; /* Darker blue for better contrast */
        }

        .category-card .category-name {
            font-weight: 700;
        }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .category-card, .category-card-image, .category-content {
            transition: none !important;
        }
    }

    /* Print styles */
    @media print {
        .category-card {
            box-shadow: none;
            page-break-inside: avoid;
            border: 1px solid #ddd;
        }

        .category-card-inner {
            background-color: #f0f0f0;
        }

        .category-card .category-name, .item-count {
            color: #000;
            text-shadow: none;
        }
    }

    /* ── §13.9 dark paired-flip (append-only; all light rules above byte-identical) ── */
    [data-theme="dark"] .category-card {
        background-color: var(--rently-card-bg, #1e293b); /* #ffffff white matte frame → #1e293b: kill the white-frame island on the dark home */
    }