/*
 * Responsive layout for the main Lemmon Photo website.
 *
 * This file intentionally overrides the legacy Kickstart grid without
 * modifying the vendor stylesheets. Desktop keeps the existing layout;
 * tablet and mobile layouts progressively adapt below 960px and 700px.
 */

/* Base layout and readable content */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1.75;
}

#wrap {
    width: min(960px, 100%);
}

.content_wrap {
    padding: 24px;
}

.content_wrap p,
.content_wrap li {
    overflow-wrap: anywhere;
}

.content_wrap table td {
    word-break: normal;
}

img,
video,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

#wrap > .col_12:first-child img {
    width: min(400px, 100%);
}

/* Form controls should never exceed their container. */
#reserve_form input[type="text"],
#reserve_form input[type="email"],
#reserve_form input[type="tel"],
#reserve_form select,
#reserve_form textarea {
    max-width: 100%;
}

#reserve_form label {
    display: inline-block;
    padding-block: 4px;
}

/* Spam trap: hidden from people and assistive technology. */
.reservation-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.reservation-error {
    margin: 20px 0;
    padding: 16px 20px;
    border: 1px solid #d99;
    border-radius: 6px;
    background: #fff3f3;
    color: #721c24;
}

.field-validation-message {
    display: block;
    margin-top: 8px;
    color: #ff7373;
    font-weight: 700;
}

/* Keep the fixed-width desktop grid, but let the page fit smaller tablets. */
@media (max-width: 960px) {
    #wrap {
        border: 0;
    }
}

/* Mobile layout */
@media (max-width: 700px) {
    body {
        font-size: 16px;
        line-height: 1.8;
    }

    #wrap {
        width: 100%;
        overflow: hidden;
    }

    #wrap > .col_12:first-child {
        padding: 12px 12px 0;
        text-align: center;
    }

    .content_wrap {
        padding: 18px 16px;
    }

    /* Collapse every legacy grid column to a single column. */
    #wrap .col_1,
    #wrap .col_2,
    #wrap .col_3,
    #wrap .col_4,
    #wrap .col_5,
    #wrap .col_6,
    #wrap .col_7,
    #wrap .col_8,
    #wrap .col_9,
    #wrap .col_10,
    #wrap .col_11,
    #wrap .col_12 {
        float: none;
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    h1 {
        font-size: 1.35rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    p.title {
        margin-block: 1.5em;
        font-size: 1.45rem;
    }

    .updatetime {
        margin-top: 0;
    }

    /* Two-by-two navigation with comfortable tap targets. */
    ul.button-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    ul.button-bar li {
        width: 100%;
        margin: 0;
    }

    ul.button-bar li a {
        display: flex;
        min-height: 44px;
        padding: 10px 8px;
        align-items: center;
        justify-content: center;
        line-height: 1.35;
    }

    .latest-posts {
        margin-block: 12px;
        padding: 0;
    }

    .post {
        padding-inline: 0;
    }

    /* Convert the reservation table into stacked form fields. */
    #reserve_form table,
    #reserve_form tbody,
    #reserve_form tr,
    #reserve_form th,
    #reserve_form td {
        display: block;
        width: 100%;
    }

    #reserve_form table {
        border: 0;
    }

    #reserve_form tr {
        margin-bottom: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    #reserve_form th,
    #reserve_form td {
        padding: 8px 0;
        border: 0;
        white-space: normal;
    }

    #reserve_form th {
        text-align: left;
    }

    #reserve_form th p,
    #reserve_form td p,
    #reserve_form td h5 {
        margin-block: 0 8px;
    }

    #reserve_form input[type="text"],
    #reserve_form input[type="email"],
    #reserve_form input[type="tel"],
    #reserve_form select,
    #reserve_form textarea {
        width: 100% !important;
        min-height: 44px;
        padding: 10px;
        font-size: 16px;
    }

    #reserve_form textarea {
        min-height: 120px;
    }

    #reserve_form input[type="checkbox"],
    #reserve_form input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        vertical-align: middle;
    }

    #reserve_form input[type="submit"] {
        width: 100%;
        min-height: 52px;
        padding: 12px 16px;
        font-size: 16px;
        line-height: 1.4;
        white-space: normal;
    }

    #footer {
        padding: 20px 12px;
    }
}

@media (max-width: 380px) {
    ul.button-bar {
        grid-template-columns: 1fr;
    }
}