/* =========================================================================
   Totana a la Carta - Desktop layout for the HOME view
   -------------------------------------------------------------------------
   Page-specific only. The shared chrome (top bar, restaurant cards, search
   control, filter dialog, footer) lives in desktop_shared.css, which must
   be loaded first. Everything here sits inside @media (min-width: 1024px),
   so the mobile rendering is untouched.
   ========================================================================= */

@media (min-width: 1024px) {

    /* ---------------------------------------------------------------------
       2. Hero + category tiles (the old mobile bento grid)
       --------------------------------------------------------------------- */
    .card-container {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 24px;
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 48px var(--dsk-gutter) 80px;
        position: relative;
        background:
            radial-gradient(1100px 460px at 50% -140px, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
            linear-gradient(180deg, #fdf8f3 0%, #f9f3ee 100%);
    }

    /* Mobile keeps the brand hero; desktop begins directly with choices. */
    .card-container > .title-area {
        display: none !important;
    }

    /* Section label above the tiles */
    .tiles-heading {
        flex: 0 0 100%;
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 0;
        padding-bottom: 4px;
    }

    .tiles-heading h2 {
        font-family: inherit;
        font-size: 1.65rem;
        font-weight: 700;
        color: var(--dsk-ink);
    }

    .tiles-heading p {
        font-size: 0.98rem;
        color: var(--dsk-ink-soft);
    }

    /* Category tiles */
    .card-container > section {
        flex: 1 1 0;
        min-width: 200px;
        height: 264px;
        padding: 20px 16px 22px !important;
        border-radius: 22px !important;
        box-shadow: var(--dsk-shadow-sm);
        transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
        overflow: hidden;
    }

    .card-container > section:hover {
        transform: translateY(-6px);
        box-shadow: var(--dsk-shadow-md);
    }

    .card-container > section .img-container {
        height: auto;
        flex: 1;
        width: 100%;
        min-height: 0;
    }

    .card-container > section .img-container img {
        max-width: 78% !important;
        max-height: 165px !important;
        width: auto;
        object-fit: contain;
        transition: transform .25s ease;
    }

    .card-container > section:hover .img-container img {
        transform: scale(1.06);
    }

    .card-container > section .card-label {
        font-size: 1.12rem;
        font-weight: 600;
        letter-spacing: -0.005em;
    }

    .card-container > section .plus-button {
        width: 28px;
        height: 28px;
        min-width: 28px;
        max-width: 28px;
        min-height: 28px;
        max-height: 28px;
        opacity: .85;
        transition: opacity .2s ease, transform .2s ease;
    }

    .card-container > section:hover .plus-button {
        opacity: 1;
        transform: rotate(90deg);
    }

    /* Wide promo cards (gastro / movie) keep their own full-width row. */
    .card-container > section[data-card-type="horizontal"] {
        flex: 1 1 100%;
        height: 180px;
        padding: 24px 32px !important;
    }

    .card-container > section[data-card-type="horizontal"] .horizontal-card-img {
        max-height: 130px !important;
    }

    /* ---------------------------------------------------------------------
       3. Restaurant section
       --------------------------------------------------------------------- */
    .restaurant-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(260px, 28vw, 360px);
        grid-template-areas:
            "head   head"
            "filter search"
            "list   list";
        column-gap: 20px;
        align-items: center;
        margin-top: 0;
        padding: 72px var(--dsk-gutter) 88px;
    }

    .restaurant-section .category-content {
        grid-area: head;
    }

    .restaurant-section .search-section {
        grid-area: search;
        width: 100%;
        padding-bottom: 0;
        margin: 2rem 0 1.75rem;
    }

    .restaurant-section .category-filter {
        grid-area: filter;
    }

    .restaurant-section .restaurant-lists-container {
        grid-area: list;
    }

    /* Decorative category illustration, matching the mobile treatment. */
    .restaurant-section,
    .upcoming-events-section {
        overflow: visible;
    }

    .category-image-container {
        top: -24px;
        bottom: auto;
        right: 0;
        left: auto;
        width: 320px;
        height: 250px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        z-index: 0;
        opacity: 1;
    }

    .category-image {
        max-height: 240px;
        width: auto;
        object-position: right top;
        filter: none;
    }

    /* Keep the interactive header above the decorative artwork. */
    .restaurant-section .search-section,
    .restaurant-section .category-content,
    .upcoming-events-section .category-content {
        position: relative;
        z-index: 3;
    }

    /* Filter pills */
    .category-filter {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: visible;
        gap: .55rem;
        margin: 2rem 0 1.75rem;
        padding: 0;
        justify-content: flex-start !important;
    }

    .category-filter::after {
        display: none;
    }

    .category-item {
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        padding: 5px 12px 5px 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .6);
        border: 1.5px solid transparent;
        transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .category-item:hover {
        background: #fff;
        transform: translateY(-2px);
        box-shadow: var(--dsk-shadow-sm);
    }

    .category-item:has(.category-btn.active) {
        background: #fff;
        border-color: rgba(31, 27, 22, .85);
        box-shadow: var(--dsk-shadow-sm);
    }

    .category-btn {
        width: 38px;
        height: 38px;
        box-shadow: none;
        background: #fff;
        flex-shrink: 0;
    }

    .category-btn:hover {
        transform: none;
        box-shadow: none;
    }

    .category-btn.active {
        border-color: transparent;
        background: #fff;
    }

    .category-btn img {
        width: 24px !important;
        height: auto;
    }

    .category-label {
        font-size: .875rem;
        font-weight: 600;
        color: var(--dsk-ink);
        white-space: nowrap;
    }

    /* ---------------------------------------------------------------------
       4. Events section
       --------------------------------------------------------------------- */
    .upcoming-events-section {
        padding: 72px var(--dsk-gutter) 88px;
    }

    .upcoming-events-section > br {
        display: none;
    }

    .events-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        margin-top: 2.25rem;
    }

    .events-container .event-card {
        display: flex;
        flex-direction: column;
        border-radius: 18px;
        box-shadow: var(--dsk-shadow-sm);
    }

    .events-container .event-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--dsk-shadow-md);
    }

    .events-container .event-image {
        height: 210px;
    }

    .events-container .event-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .events-container .event-title {
        font-size: 1.15rem;
        line-height: 1.35;
    }

    .events-container .event-button {
        margin-top: auto;
        align-self: flex-start;
        border-radius: 999px;
        padding: .6rem 1.4rem;
    }

    #load-more-events {
        grid-column: 1 / -1;
        justify-self: center;
        margin-top: 1.25rem;
        padding: .95rem 2.25rem !important;
        border-radius: 999px;
        font-size: 1rem;
        box-shadow: var(--dsk-shadow-sm);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    #load-more-events:hover {
        transform: translateY(-2px);
        box-shadow: var(--dsk-shadow-md);
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .restaurant-section .search-section {
        width: 100%;
    }

    .restaurant-section {
        grid-template-columns: minmax(0, 1fr) 260px;
    }

    .category-item {
        padding-right: 9px;
    }

    .category-label {
        font-size: .8rem;
    }
}