/* =================================================================================
   lr article text on the website (plain CSS, no build step, no Bootstrap needed)
   - Wrap the article text (news.Description) in <div class="lr_article">…</div>.
   - Same look as the article preview in lr (src/dist/admin/css/article_content.css):
     when you change one, change the other.
   - Colours / font: change the variables below.
   - Made for Bootstrap 3.3.7 on the website (works without it too): sizes are in px, not rem, because
     Bootstrap 3 sets html { font-size: 10px } (1rem would be 10px, not 16px as in lr);
     its blockquote size / padding / "— " before the footer and the .embed-responsive padding are overridden here.

   Classes the lr editor saves:
     blockquote.article-quote (.article-quote--long)       quote; > .article-quote__mark, p, footer.article-quote__attribution > strong + span
     figure.article-video > .ratio.embed-responsive > iframe   video (16:9); > figcaption.article-video__caption > strong + span
     div.ratio.embed-responsive > iframe                    older video (no figure, no caption)
     figure.article-image[data-copper-id] > img             gallery photo; the website adds figcaption.article-image__caption > strong + span
     blockquote, hr, a[target=_blank], a[download], a[href^=mailto:] (Font Awesome 5 icons), p:empty (empty line)
     a.mentions_data                                        old club / player mentions (old articles only)
   ================================================================================= */

.lr_article {
    --la-text: #2b2f36;
    --la-heading: #0f2240;
    --la-accent: #f47a20; /* #f47a20; */
    --la-muted: #6b7280;
    --la-box: #f4f7fb;
    --la-border: #e3e8ef;
    --la-radius: 12px;
    --la-link: #215BA6
}

/* ---------------------------------------------------------------------------------
   Base text
   --------------------------------------------------------------------------------- */
.lr_article {    
    overflow-wrap: break-word;
}
.lr_article p { margin: 0 0 18px; }
.lr_article p:empty { min-height: 1em; }   /* empty line from the editor (Enter twice) */
.lr_article h2,
.lr_article h3 {
    font-family: var(--la-font);
    font-weight: 700;
    color: var(--la-heading);
    line-height: 1.25;
    margin: 28px 0 12px;
}
.lr_article h2 { font-size: 25px; }
.lr_article h3 { font-size: 20px; }
.lr_article hr { margin: 32px 0; border: 0; border-top: 1px solid var(--la-border); opacity: 1; }
.lr_article ul,
.lr_article ol { padding-left: 24px; margin: 0 0 18px; }
.lr_article li { margin: 0 0 6px; }
.lr_article img { max-width: 100%; height: auto; }
.lr_article iframe { max-width: 100%; border: 0; }
.lr_article table { max-width: 100%; }
.lr_article figure { margin: 32px 0; }
.lr_article figcaption { text-align: left; }   /* website CSS often centres captions */

/* ---------------------------------------------------------------------------------
   Links: icons from Font Awesome 5 Free (loaded by the website): new tab, download, e-mail
   --------------------------------------------------------------------------------- */
.lr_article a { color: var(--la-link); text-decoration: none !important; text-underline-offset: 2px; }
.lr_article a:hover,
.lr_article a:focus { color: var(--la-accent); text-decoration: none; }   /* Bootstrap 3: dark blue on hover */
.lr_article a[target="_blank"]:not(:has(img))::after,
.lr_article a[download]:not(:has(img))::before,
.lr_article a[href^="mailto:"]::before {
    display: inline-block;   /* no underline under the icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;        /* solid icons (free) */
    font-style: normal;
    font-size: .75em;
    line-height: 1;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}
.lr_article a[target="_blank"]:not(:has(img))::after { content: "\f35d"; margin-left: .3em; }   /* external-link-alt */
.lr_article a[download]:not(:has(img))::before { content: "\f019"; margin-right: .35em; }       /* download */
.lr_article a[download]::after { content: none; }   /* a download in a new tab: one icon is enough */
.lr_article a[href^="mailto:"] { white-space: nowrap; }
.lr_article a[href^="mailto:"]::before { content: "\f0e0"; margin-right: .35em; }              /* envelope */
.lr_article a.mentions_data { color: var(--la-accent); }   /* old mentions: normal links */

/* ---------------------------------------------------------------------------------
   Plain quote (blockquote without a class, quote button)
   --------------------------------------------------------------------------------- */
.lr_article blockquote:not(.article-quote) {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--la-border);
    color: var(--la-muted);
    font-size: inherit;   /* Bootstrap 3: 17.5px */
    font-style: italic;
}
.lr_article blockquote:not(.article-quote) p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------------
   Quote (blockquote.article-quote, quote pop-up)
   --------------------------------------------------------------------------------- */
.lr_article blockquote.article-quote {
    position: relative;
    margin: 32px 0;
    padding: 28px 32px;
    background: var(--la-box);
    border: 1px solid var(--la-border);
    border-left: 4px solid var(--la-accent);
    border-radius: var(--la-radius);
    color: var(--la-text);
    font-size: inherit;   /* Bootstrap 3: 17.5px */
    font-style: normal;
}
.lr_article .article-quote .article-quote__mark {
    position: static;
    display: block;
    margin-bottom: 6px;
    font-family: var(--la-font);
    font-weight: 900;
    font-size: 56px;
    line-height: .8;
    height: 32px;
    color: var(--la-accent);
}
.lr_article .article-quote p {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 16px;
}
.lr_article .article-quote p:last-child { margin-bottom: 0; }
.lr_article .article-quote.article-quote--long p { font-size: 14px; }
.lr_article .article-quote .article-quote__attribution {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--la-border);
    line-height: 1.5;
}
.lr_article .article-quote .article-quote__attribution::before { content: none; }   /* Bootstrap 3/4 adds "— " */
.lr_article .article-quote .article-quote__attribution strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--la-heading);
}
.lr_article .article-quote .article-quote__attribution span {
    display: block;
    font-size: 11px;
    color: var(--la-muted);
}

/* ---------------------------------------------------------------------------------
   Video (figure.article-video > .ratio > iframe + figcaption) and older videos (.embed-responsive)
   --------------------------------------------------------------------------------- */
.lr_article .article-video { margin: 32px 0; }
.lr_article .article-video .ratio,
.lr_article .embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    aspect-ratio: 16 / 9;
    margin: 0 0 18px;
    border-radius: var(--la-radius);
    overflow: hidden;
    background: #000;
    max-width: 760px;
    /* margin: 0 auto; */
}
.lr_article .article-video .ratio,
.lr_article .article-video .embed-responsive { margin: 0; }
.lr_article .ratio::before,
.lr_article .embed-responsive::before { display: none; }   /* Bootstrap 4/5 padding trick: aspect-ratio does it */
.lr_article .ratio > iframe,
.lr_article .embed-responsive > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------------------
   Gallery image (figure.article-image > img; the website adds the caption from the photo gallery)
   --------------------------------------------------------------------------------- */
.lr_article .article-image { margin: 32px 0; }
.lr_article .article-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--la-radius);
    border: 1px solid var(--la-border);
    max-width: 760px;
    /* margin: 0 auto; */
}

/* captions: one line of small grey text, title · source */
.lr_article .article-video__caption,
.lr_article .article-image__caption {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--la-muted);
}
.lr_article .article-video__caption strong,
.lr_article .article-image__caption strong,
.lr_article .article-video__caption span,
.lr_article .article-image__caption span {
    display: inline;
    font-weight: 400;
    color: inherit;
}
.lr_article .article-video__caption strong + span::before,
.lr_article .article-image__caption strong + span::before { content: " · "; }

/* ---------------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------------- */
@media (max-width: 576px) {    
    .lr_article blockquote.article-quote { padding: 20px; }    
}