/* =========================================================
   LEADING LINES — 2025 EXHIBITIONS
   exhibitions.css

   Page-specific styling for 2025-exhibitions.html. Shared
   colours, fonts, buttons and the navbar come from style.css.

   Values taken from the site's stylesheets:

     page CSS   : elementor/css/post-109.css
     background : elementor/css/local-109-frontend-desktop.css

     .e-bc85304 { margin-block-start:-90px;
                  background-color:#014c61 }    <- hero band
     .e-c97580c { flex-direction:row }          <- salon rows
     .e-6be83b9 { height:112px;
                  background-color:#014c61 }    <- footer
========================================================= */


/* =========================================================
   HERO — solid dark teal band with the yellow title
========================================================= */

.ll-exh-hero {

    /* Slides up underneath the transparent header */
    margin-block-start: -90px;

    padding: 10px 10px 72px;     /* incl. the container's 62px bottom margin */

    background-color: var(--ll-primary);
    background-image: none;
}

/* Heading 050ee8b : margin 79px top, 100px Berkshire Swash, #FFFBA2 */
.ll-exh-hero .ll-hero__title {
    margin: 79px 0 20px;
}


/* =========================================================
   SALON LIST
   Two salons per row (atomic wrapper e-c97580c, flex row)
========================================================= */

.ll-exh {
    padding: 10px;
}

.ll-exh-row {
    margin-bottom: 20px;
}

.ll-exh-row:last-child {
    margin-bottom: 0;
}

/* One salon card */
.ll-exh-block {
    padding: 10px;
    text-align: center;
}

/* Salon name : 38px Berkshire Swash, weight 600, #000000, centred */
.ll-exh-block__title {

    margin: 0 0 20px;

    font-family: var(--ll-font-heading);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;

    text-align: center;

    color: var(--ll-ink);
}

/* Linked salon names (2026 salons whose name is a link) keep the
   heading's own colour and no underline, matching Elementor's
   ".elementor-heading-title[class*=elementor-size-] > a" rule. */
.ll-exh-block__title a,
.ll-exh-block__title a:visited,
.ll-exh-block__title a:hover,
.ll-exh-block__title a:focus,
.ll-exh-block__title a:active {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
}


/* Banner image : 300 x 204, centred */
.ll-exh-block__figure {
    margin: 0 0 20px;
    text-align: center;
}

.ll-exh-block__img {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Buttons : centred row */
.ll-exh-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}


/* =========================================================
   DATA STATE MESSAGES
   Shown while the XML is loading, when it is empty, or when
   the page cannot read it (for example when opened from a
   file:// path instead of a local server).
========================================================= */

.ll-exh-status {

    margin: 0 0 20px;
    padding: 20px 10px;

    font-family: var(--ll-font-body);
    font-size: 16px;
    line-height: 1.6;

    text-align: center;

    color: var(--ll-text);
}

.ll-exh-status code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95em;
    color: var(--ll-primary);
    word-break: break-word;
}

.ll-exh-status--error {
    color: var(--ll-ink);
}

.ll-exh-status__line {
    display: block;
    margin-top: 8px;
}


/* =========================================================
   RESPONSIVE  (post-109.css @media max-width:767px)
========================================================= */

@media (max-width: 767.98px) {

    /* Salon names : 20px */
    .ll-exh-block__title {
        font-size: 20px;
    }

    /* Buttons : 15px */
    .ll-exh-actions .ll-btn {
        font-size: 15px;
    }

    .ll-exh-actions {
        gap: 12px;
    }

    .ll-exh-status {
        padding: 10px;
        font-size: 14px;
    }

    /* Footer image : 7% on mobile for this page */
    .ll-footer__logo {
        width: 7%;
    }

    .ll-exh-hero {
        padding-bottom: 50px;
    }

    .ll-exh-hero .ll-hero__title {
        margin-top: 56px;
    }
}