/*
    The small screen.

    Everything in this file speaks only to a phone or to a small
    tablet. A computer sees the site exactly as it saw it before this
    file existed: the rules here are inside a query of width and never
    touch a wide screen.

    The file is loaded last of all the stylesheets of the theme, so
    that on a small screen it has the last word.
*/

/* ===========================================================================
   The events of the home page
   On a wide screen the service that is featured stands beside its
   picture. On a phone the two stand one above the other, so that the
   words of the service are read at the width of the screen.
   =========================================================================== */

@media (max-width: 900px) {
    .events-container {
        grid-template-columns: 1fr !important;
        gap: var(--tlv-space-5) !important;
        align-items: stretch !important;
        margin-bottom: var(--tlv-space-7) !important;
    }

    .featured-event {
        padding: var(--tlv-space-5) !important;
    }

    .featured-event h3 {
        font-size: 1.4rem !important;
    }

    .featured-event p {
        margin-bottom: var(--tlv-space-4) !important;
    }

    /* The button of the service takes the whole width of the card. */
    .featured-event p a {
        display: block !important;
        width: 100%;
        padding: 13px 20px !important;
        text-align: center;
    }

    /* The picture of the service is shorter, so that the phone is not
       asked to scroll through a long band of colour. */
    .featured-event .event-image,
    .events-container .event-image {
        min-height: 190px !important;
        height: 190px !important;
    }

    /* The clock is made of four squares that stand two by two. */
    .featured-event .countdown-timer,
    .events-container .countdown-timer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--tlv-space-3) !important;
        justify-content: stretch !important;
        margin-top: var(--tlv-space-5) !important;
    }

    .featured-event .countdown-item,
    .event-card .countdown-item {
        min-width: 0 !important;
        padding: var(--tlv-space-3) var(--tlv-space-2) !important;
    }

    .featured-event .countdown-number,
    .event-card .countdown-number {
        font-size: 1.35rem !important;
    }

    .upcoming-events-grid,
    .previous-events-section {
        margin-bottom: var(--tlv-space-7) !important;
    }

    .upcoming-events-grid > div,
    .previous-events-section > div {
        grid-template-columns: 1fr !important;
        gap: var(--tlv-space-4) !important;
    }

    .event-card {
        padding: var(--tlv-space-5) !important;
    }

    .event-card img {
        height: 170px !important;
    }

    .events-section h2 {
        margin-bottom: var(--tlv-space-6) !important;
    }
}

/* ===========================================================================
   The footer
   On a wide screen the footer is four columns. On a phone the columns
   stand one above the other, each one with a line of gold under its
   name, so that a visitor knows where one part ends and the next
   begins.
   =========================================================================== */

@media (max-width: 768px) {
    .site-footer {
        padding: var(--tlv-space-7) 0 var(--tlv-space-5) !important;
    }

    .site-footer .container {
        padding-left: var(--tlv-space-5) !important;
        padding-right: var(--tlv-space-5) !important;
    }

    .footer-widgets {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: var(--tlv-space-6) !important;
    }

    .footer-widget,
    .footer-widget-full,
    .footer-widget-half,
    .footer-widget-third,
    .footer-widget-quarter {
        grid-column: 1 !important;
        padding: var(--tlv-space-5) 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-widget:first-child {
        padding-top: 0 !important;
    }

    .footer-widget:last-child {
        border-bottom: 0;
        padding-bottom: 0 !important;
    }

    .site-footer .footer-widget h3 {
        font-size: 1rem !important;
        margin-bottom: var(--tlv-space-3) !important;
        padding-bottom: var(--tlv-space-2);
        border-bottom: 2px solid var(--tlv-accent);
        display: inline-block;
    }

    .site-footer .footer-widget p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .site-footer .footer-widget a {
        display: block !important;
        width: 100%;
        margin-bottom: var(--tlv-space-3);
        padding: var(--tlv-space-2) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.95rem;
    }

    .site-footer .footer-widget a:last-child {
        border-bottom: 0;
    }

    /* The letter of the footer stands above the button, so that the
       button is wide enough to be pressed with a thumb. */
    .footer-newsletter-form,
    .site-footer .newsletter-form {
        flex-direction: column !important;
        gap: var(--tlv-space-3) !important;
        margin-top: var(--tlv-space-4) !important;
    }

    .footer-newsletter-form input[type="email"],
    .footer-newsletter-btn,
    .site-footer .newsletter-form input,
    .site-footer .newsletter-btn {
        width: 100% !important;
        min-height: 48px;
        padding: 12px 16px !important;
        border-radius: var(--tlv-radius) !important;
        font-size: 1rem;
    }

    .footer-bottom {
        padding-top: var(--tlv-space-5) !important;
    }

    .site-footer .footer-bottom p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}

/* ===========================================================================
   The live stream
   On a wide screen the picture of the stream stands beside the chat. On a
   phone the two cannot share the width: the picture takes the whole width
   of the screen, and the chat stands below it.
   =========================================================================== */

@media (max-width: 900px) {
    .live-stream-container {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--tlv-space-5) !important;
    }

    .live-chat-section {
        gap: var(--tlv-space-5) !important;
    }

    /* The picture of the stream keeps the shape of a television. */
    .live-video-section {
        border-radius: var(--tlv-radius) !important;
    }

    .no-live-stream {
        padding: var(--tlv-space-7) var(--tlv-space-5) !important;
        min-height: 0 !important;
    }

    .no-stream-icon {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: var(--tlv-space-5) !important;
    }

    .chat-messages {
        height: 260px !important;
    }

    /* The letter of the chat is wide enough to be written in, and the
       button is wide enough to be pressed with a thumb. */
    .chat-input-container {
        padding: var(--tlv-space-3) !important;
    }

    #chat-input {
        min-width: 0;
        font-size: 1rem !important;
        padding: 12px !important;
    }

    .chat-send-btn {
        min-height: 48px;
        padding: 12px 16px !important;
    }

    .live-action-btn {
        min-height: 48px;
    }
}

/* ===========================================================================
   The testimonies of the home page
   =========================================================================== */

@media (max-width: 640px) {
    .tlv-testimony-card__open {
        padding: var(--tlv-space-4) !important;
        gap: var(--tlv-space-3) !important;
    }

    .tlv-testimony-card__quote {
        font-size: 1.05rem !important;
    }

    .tlv-testimony-card__cta {
        margin: 0 var(--tlv-space-4) var(--tlv-space-4) !important;
    }
}