/* =========================================================================
   Totana a la Carta - Desktop layout for the PHARMACY ON DUTY view
   -------------------------------------------------------------------------
   Page-specific only. The shared chrome (top bar, 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) {

    :root {
        --phd-max: 1180px;
    }

    /* The compact mobile header is replaced by the shared top bar. */
    .header {
        display: none !important;
    }

    /* This page is what the bar's Farmacia link points at, so mark it. */
    .dsk-nav-optional {
        color: var(--dsk-ink);
        font-weight: 600;
        background: rgba(31, 27, 22, .07);
    }

    /* ---------------------------------------------------------------------
       1. Breadcrumb
       --------------------------------------------------------------------- */
    .pharmacy-breadcrumb {
        display: none !important;
    }

    /* ---------------------------------------------------------------------
       2. Title band
       --------------------------------------------------------------------- */
    .page-title-section {
        padding: 44px max(32px, calc((100% - 1180px) / 2)) !important;
        text-align: left;
        position: relative;
        overflow: hidden;
        background: var(--pharmacy-green);
    }

    .page-title {
        position: relative;
        z-index: 2;
        font-family: inherit;
        font-size: 2.9rem !important;
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    }

    .pharmacy-title-icon {
        display: block !important;
        position: absolute;
        top: 50%;
        right: max(42px, calc((100% - 1180px) / 2));
        color: rgba(255, 255, 255, .24);
        font-size: 5rem;
        line-height: 1;
        transform: translateY(-50%);
        pointer-events: none;
    }

    /* ---------------------------------------------------------------------
       3. Cards
       --------------------------------------------------------------------- */
    .pharmacy-container {
        max-width: var(--phd-max) !important;
        width: calc(100% - 64px);
        margin: 0 auto;
        padding: 0 0 4.5rem !important;
    }

    .time-display {
        text-align: left;
        font-size: 1rem;
        margin: 2rem 0 1.5rem;
    }

    .pharmacy-cards-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 2rem;
        /* The next-shift card carries far less content, so let it size to
           what it holds instead of stretching to the hero card's height. */
        align-items: start;
        margin-bottom: 2rem;
    }

    .hero-card,
    .secondary-card {
        border-radius: 18px;
        box-shadow: var(--dsk-shadow-sm);
        transition: box-shadow .2s ease;
    }

    .hero-card-accent {
        background: var(--pharmacy-green);
    }

    .hero-card:hover,
    .secondary-card:hover {
        box-shadow: var(--dsk-shadow-md);
    }

    .pharmacy-name {
        font-family: inherit;
        font-size: 2.1rem !important;
        line-height: 1.12;
        letter-spacing: -0.015em;
    }

    .secondary-card {
        justify-content: flex-start;
    }

    .secondary-name {
        font-family: inherit;
        font-size: 1.45rem !important;
        line-height: 1.2;
    }

    .action-buttons .btn-call,
    .action-buttons .btn-directions {
        border-radius: 12px;
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .action-buttons .btn-call:hover,
    .action-buttons .btn-directions:hover {
        transform: translateY(-1px);
        box-shadow: var(--dsk-shadow-sm);
    }

    /* ---------------------------------------------------------------------
       4. Note, toggle and the week ahead
       --------------------------------------------------------------------- */
    .info-note {
        border-radius: 14px;
        margin-bottom: 1.5rem;
        background: #fff;
        border-left-color: var(--border-default);
        color: var(--text-secondary);
        box-shadow: var(--dsk-shadow-sm);
    }

    .info-note i {
        color: var(--text-muted);
    }

    .week-toggle {
        border-radius: 14px;
        box-shadow: var(--dsk-shadow-sm);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .week-toggle:hover {
        transform: translateY(-1px);
        box-shadow: var(--dsk-shadow-md);
    }

    .week-list-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 18px;
        box-shadow: var(--dsk-shadow-sm);
    }

    .week-list-inner .week-item:nth-child(odd) {
        border-right: 1px solid #f0f0f0;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .page-title {
        font-size: 2.4rem !important;
    }

    .pharmacy-name {
        font-size: 1.8rem !important;
    }

    .pharmacy-cards-grid {
        gap: 1.5rem;
    }
}