/**
 * Joomill Price List Pro
 *
 * @copyright   Copyright (c) 2026 Jeroen Moolenschot | Joomill
 * @license     GNU General Public License version 3 or later
 * @link        https://www.joomill-extensions.com
 */

/* A menu card is not a table. No column headings, the name and the price on one
   line with a leader between them, the description underneath. That shape is
   kept on a phone as well: a paper menu does not stack. */

.pricelist-menucard {
    margin: 2em auto;
    width: 100%;
}

.pricelist-menucard .menucard-item {
    display: flex;
    gap: 1em;
    padding: 0.9em 0;
    align-items: flex-start;
}

/* The photo column. Its width is an inline style, so a site can change it
   without an override. */

.pricelist-menucard .menucard-media {
    flex: 0 0 auto;
}

.pricelist-menucard .menucard-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.pricelist-menucard .menucard-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* The line that carries the name, the leader and the price. baseline alignment
   is what puts the dots under the text rather than under the box. */

.pricelist-menucard .menucard-line {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
}

.pricelist-menucard .menucard-name {
    flex: 0 1 auto;
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A custom field still carries the column width it was given for the table.
   On a card that width means nothing, and a fixed block of a couple of hundred
   pixels is what pushes the price off the line on a phone. It sits in a style
   attribute, so only !important gets past it. */

.pricelist-menucard .menucard-meta .pricelist-cell,
.pricelist-menucard .menucard-inline .pricelist-cell {
    width: auto !important;
}

.pricelist-menucard .menucard-leader {
    flex: 1 1 auto;
    border-bottom: 1px dotted #b9c0c7;
    /* Sits just above the baseline so the dots read as a line, not as text. */
    transform: translateY(-0.25em);
    min-width: 1.5em;
}

.pricelist-menucard--flat .menucard-leader {
    border-bottom: 0;
}

.pricelist-menucard .menucard-price {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

.pricelist-menucard .menucard-description {
    color: #6a737c;
    font-size: 0.9em;
    margin-top: 0.15em;
}

.pricelist-menucard .menucard-description p:last-child {
    margin-bottom: 0;
}

/* Whatever a custom field renders: allergen icons, diet labels, a calorie
   count. The row wraps rather than pushing the price off the line. */

.pricelist-menucard .menucard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em 0.9em;
    align-items: center;
    margin-top: 0.35em;
    font-size: 0.85em;
    color: #6a737c;
}

.pricelist-menucard .menucard-meta .pricelist-cell {
    padding: 0;
    overflow: visible;
}

.pricelist-menucard .menucard-meta .pricelist-cell--heading {
    display: none;
}

/* Anything sitting inside the name line, such as a spiciness rating. */

.pricelist-menucard .menucard-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4em;
    align-items: baseline;
    min-width: 0;
}

.pricelist-menucard .menucard-inline .pricelist-cell {
    padding: 0;
    overflow: visible;
}

.pricelist-menucard .menucard-inline .pricelist-cell--heading {
    display: none;
}

.pricelist-menucard .menucard-edit {
    flex: 0 0 auto;
}

@media all and (max-width: 600px) {
    .pricelist-menucard .menucard-item {
        gap: 0.75em;
    }

    .pricelist-menucard .menucard-description {
        font-size: 0.85em;
    }

    /* On a phone a photo column of a hundred-odd pixels leaves the text nothing
       to live in, so the item can stack instead. display:contents lifts the body
       out of the way, which puts the name line, the description and the meta row
       straight into the grid; only then can the photo sit between the title and
       the description rather than above or below the whole block. */

    .pricelist-menucard--photo-above .menucard-item,
    .pricelist-menucard--photo-below .menucard-item {
        display: grid;
        grid-template-columns: 100%;
        gap: 0.5em;
    }

    .pricelist-menucard--photo-above .menucard-body,
    .pricelist-menucard--photo-below .menucard-body {
        display: contents;
    }

    /* Beats the width that the photo setting writes into the head, without
       needing !important: one class more specific. */

    .pricelist-menucard.pricelist-menucard--photo-above .menucard-media,
    .pricelist-menucard.pricelist-menucard--photo-below .menucard-media {
        width: 100%;
    }

    .pricelist-menucard--photo-above .menucard-media {
        order: 1;
    }

    .pricelist-menucard--photo-above .menucard-line {
        order: 2;
    }

    .pricelist-menucard--photo-below .menucard-line {
        order: 1;
    }

    .pricelist-menucard--photo-below .menucard-media {
        order: 2;
    }

    .pricelist-menucard--photo-above .menucard-description,
    .pricelist-menucard--photo-below .menucard-description {
        order: 3;
    }

    .pricelist-menucard--photo-above .menucard-meta,
    .pricelist-menucard--photo-below .menucard-meta {
        order: 4;
    }

    .pricelist-menucard--photo-above .menucard-edit,
    .pricelist-menucard--photo-below .menucard-edit {
        order: 5;
    }
}