/* ------------------------------------------------------------------
   Article layout for the long-form guide, town and service pages.

   The shared "callto-action" section is a 5/7 image-and-blurb split.
   That works for a short promo, but these pages carry 700-1150 word
   articles, so the 5-column image side ended up as a tall empty gutter
   while the text ran at ~1000px lines. This rescopes that one section
   to a normal article column. Scoped to .mvr-article so the other
   ~11,700 pages using the same markup are untouched.
   ------------------------------------------------------------------ */

.mvr-article .container { max-width: 900px; }

/* Collapse the grid to one flow and float the image so the opening
   paragraphs wrap beside it. The grid here is flex-based (mainstyles.css),
   so display and flex are both reset explicitly. */
.mvr-article .row { display: block; margin-left: 0; margin-right: 0; }
.mvr-article .row > [class*="col-"] {
    display: block;
    float: none;
    flex: none;
    width: auto;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.mvr-article .row > [class*="col-"]:first-child {
    float: left;
    width: 300px;
    max-width: 38%;
    margin: 6px 32px 18px 0;
}
.mvr-article .row::after { content: ""; display: block; clear: both; }

/* the text column must not establish a block formatting context, or it would
   sit below the floated image instead of wrapping around it */
.mvr-article .row > [class*="col-"]:last-child,
.mvr-article .callto-action-text,
.mvr-article .text-holder {
    display: block;
    overflow: visible;
    width: auto;
    clear: none;
}

/* Lead image at its natural size. The sources are 360x440; stretching them
   across the column upscaled them into a blurry banner. */
.mvr-article .callto-action-imgboxx { margin: 0; overflow: hidden; border-radius: 10px; }
.mvr-article .callto-action-imgboxx img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* trim the template's oversized top gap above the article */
.mvr-article.callto-action-area.style-two { padding-top: 55px; }

/* readable measure and rhythm */
.mvr-article .callto-action-text .text-holder p {
    text-align: left;          /* the template justifies, which rivers badly at this width */
    line-height: 1.75;
    margin: 0 0 20px;
    font-size: 17px;
}
.mvr-article .text-holder h2 { margin: 0 0 18px; line-height: 1.3; font-size: 28px; }
.mvr-article .text-holder h3 {
    margin: 34px 0 12px;
    line-height: 1.3;
    font-size: 23px;
}
.mvr-article .text-holder h3:first-child { margin-top: 0; }
.mvr-article .text-holder ul { margin: 0 0 22px 22px; }
.mvr-article .text-holder li { line-height: 1.7; margin-bottom: 8px; }
.mvr-article .mvr-byline { margin: 0 0 22px; }

/* the related-guides and useful-links lists */
.mvr-article .usefull-links { margin: 8px 0 26px 20px; }
.mvr-article .usefull-links li { line-height: 1.7; margin-bottom: 6px; }

@media (max-width: 991px) {
    .mvr-article .container { max-width: 100%; padding-left: 15px; padding-right: 15px; }
    .mvr-article .row > [class*="col-"]:first-child {
        float: none; width: auto; max-width: 100%; margin: 0 0 24px;
    }
    .mvr-article .callto-action-imgboxx img { width: 100%; max-height: 300px; object-fit: cover; }
    .mvr-article .text-holder h3 { font-size: 21px; margin-top: 28px; }
    .mvr-article.callto-action-area.style-two { padding-top: 35px; }
}
@media (max-width: 575px) {
    .mvr-article .callto-action-text .text-holder p { font-size: 16px; line-height: 1.7; }
    .mvr-article .callto-action-imgboxx img { max-height: 220px; }
}

/* category link in the article byline */
.mvr-byline .mvr-cat-link{
  color:#e8341a; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(232,52,26,.35);
}
.mvr-byline .mvr-cat-link:hover,
.mvr-byline .mvr-cat-link:focus-visible{
  color:#ff6600; border-bottom-color:#ff6600; text-decoration:none;
}

/* Links inside the article prose. The theme gives ".text-holder a" a 300
   weight and ".callto-action-text a" an inline-block pill (padding 6px 8px),
   which made in-text keyword links look thin and pushed list links off the
   margin. Same look as the city pages' .mvr-city-copy links. The byline
   category link keeps its own style; the usefull-links list is left alone. */
.mvr-article .callto-action-text .text-holder p:not(.mvr-byline) a,
.mvr-article .callto-action-text .text-holder ul:not(.usefull-links) > li a,
.mvr-article .callto-action-text .text-holder ol > li a {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: inherit;
    font-weight: 600;
    color: #d71315;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mvr-article .callto-action-text .text-holder p:not(.mvr-byline) a:hover,
.mvr-article .callto-action-text .text-holder p:not(.mvr-byline) a:focus,
.mvr-article .callto-action-text .text-holder ul:not(.usefull-links) > li a:hover,
.mvr-article .callto-action-text .text-holder ol > li a:hover { color: #e6182b; }

/* list text at the same size as the paragraphs */
.mvr-article .callto-action-text .text-holder ul:not(.usefull-links) > li,
.mvr-article .callto-action-text .text-holder ol > li { font-size: 17px; }
@media (max-width: 575px) {
    .mvr-article .callto-action-text .text-holder ul:not(.usefull-links) > li,
    .mvr-article .callto-action-text .text-holder ol > li { font-size: 16px; }
}

/* related-pages list: flush left, clear row spacing */
.mvr-article .text-holder ul.mvr-related { list-style: none; margin: 0 0 22px; padding: 0; }
.mvr-article .text-holder ul.mvr-related > li { margin-bottom: 10px; padding-left: 0; }