/* Theme Name: learningphotography
Theme URI: https://batsteek.github.io/learning-photography/
Author: Emmanuel ARNOUD
Author URI: https://batsteek.github.io/learning-photography/
Description: This theme was created with Pinegrow Web Editor
Version: 1.77
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: learningphotography
*/
.new-badge {
    display: none;

    /* Caché par défaut */
    background-color: #176c36;
    color: white;
    padding: 2px 5px;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: middle;
}

/* Shared presentation; classes remain stable for Pinegrow actions. */
.gradient-text,
.gradient-heading {
    display: inline-block;
    color: var(--itp-ink);
    -webkit-text-fill-color: currentColor;
}

/* Reading links remain identifiable independently of their color. */
a[href]:not([rel="home"]):not(.btn) {
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 0.06em;
}

/* Keep the brand treatment on the logo, with solid pagination text. */
main .gradient-text {
    background: none;
    color: var(--itp-accent);
    -webkit-text-fill-color: currentColor;
    animation: none;
}

a[href]:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.btn:focus,
.form-control:focus,
[tabindex]:not([tabindex="-1"]):focus {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}

/* Use the browser focus-visible heuristic for links and action controls. */
@supports selector(:focus-visible) {
    a[href]:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    .btn:focus:not(:focus-visible),
    [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) {
        outline: none;
    }
}


/* Approved editorial presentation. Palette variables are emitted by custom.scss. */
header .container {
    max-width: 1160px;
    margin-top: 0 !important;
    padding: 38px 32px 8px;
    border-bottom: 0;
}
header .text-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    text-align: center !important;
}
header br { display: none; }
header [rel="home"] { flex-shrink: 0; }
header .editorial-signature {
    margin: 0 0 16px;
    color: var(--itp-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .23em;
    text-transform: uppercase;
}
header .gradient-text {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(64px, 7.5vw, 96px);
    font-weight: 400;
    letter-spacing: -.06em;
    line-height: 1.03;
    color: var(--itp-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
}
header #tagline {
    display: block !important;
    max-width: 760px;
    min-height: 0;
    margin: 22px auto 0;
    padding: 0 !important;
    background: transparent !important;
    color: var(--itp-muted) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px !important;
    font-style: italic;
    line-height: 1.55;
    text-align: center;
}
main > .container {
    max-width: 1160px;
    margin-top: 24px !important;
    padding: 0 32px;
}
main > .container > .card {
    border: 0 !important; /* Existing inline dotted frame owns this conflict. */
    background: transparent;
}
main > .container > .card > .card-body { padding: 0; }
main > .container > .card > .card-body > figure {
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
}
main > .container > .card > .card-body > figure img {
    display: block;
    width: 100%;
    max-width: 840px;
    height: auto;
    margin: 0 auto;
    border-radius: 0;
}
/* Photographic-print borders stay inside the existing display widths. */
main .card-columns figure > a,
main .card-columns figure > img,
main > .container > .card > .card-body > figure > img {
    box-sizing: border-box;
    border: 10px solid #fffdf9;
}
main > .container > .card > .card-body > .card-title {
    width: 100%;
    max-width: 680px;
    margin: 28px auto 12px;
    padding-top: 0 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.12;
    text-align: left;
    color: var(--itp-ink);
}
main > .container > .card > .card-body > .card-subtitle {
    width: 100%;
    max-width: 680px;
    margin: 0 auto !important; /* Override Bootstrap mb-2 so this layout owns the gap once. */
    text-align: left;
    font-size: 13px;
    letter-spacing: 0.12em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--itp-muted) !important;
}
main > .container > .card > .card-body > .card-text {
    width: 100%;
    min-width: 0;
    max-width: 680px;
    margin: 28px auto 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.8;
    overflow-wrap: break-word;
}
.card-text > p { margin-bottom: 28px; }
.card-text > h1,
.card-text > h2,
.card-text > h3 {
    margin: 64px 0 28px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.card-text > h1 { font-size: 46px; }
#french,
#english {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    letter-spacing: 0.07em;
    line-height: 1.6;
    margin-bottom: 36px;
}
.random-promo-block {
    margin: 64px 0 !important;
    border: 0;
    border-top: 1px solid var(--itp-rule);
    border-bottom: 1px solid var(--itp-rule);
    background: transparent;
}
.random-promo-block > .card-body { padding: 32px 0; }
.random-promo-block h3 {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.6;
    text-transform: uppercase;
}
.random-promo-block h4 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
}
.random-promo-block h4 a[href]:not(.btn) {
    text-decoration: none;
}
.random-promo-block .text-dark { color: var(--itp-ink) !important; }
.random-promo-block .card-text { font-size: 16px; line-height: 1.7; }
.random-promo-block .bilingual-notice {
    color: var(--itp-muted) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.6;
}
/* Bootstrap small must not shrink this functional notice below 13 px. */
.random-promo-block .bilingual-notice small { font-size: inherit; }
.random-promo-block .btn {
    margin-top: 8px;
    padding: 11px 20px;
    border: 1px solid var(--itp-accent);
    border-radius: 0;
    background: var(--itp-accent);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    letter-spacing: 0.025em;
}
.random-promo-block img { border-radius: 0 !important; }
main > .container > .card > .card-footer {
    max-width: 680px;
    width: 100%;
    margin: 36px auto 0;
    padding: 24px 0;
    border-top: 1px solid var(--itp-rule);
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.7;
}
footer {
    max-width: 1096px;
    margin: 64px auto 0;
    padding: 24px 0;
    border-top: 0;
    color: var(--itp-muted);
    font-size: 13px;
    line-height: 1.8;
}

/* Permanent author link in the shared centered footer. */
footer .editorial-about { margin: 0 0 8px; }
footer a.editorial-about-link[href]:not([rel="home"]):not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    color: var(--itp-ink);
    font-size: 13px;
    letter-spacing: .05em;
    text-decoration: none;
}
footer a.editorial-about-link[href]:hover { color: var(--itp-accent); }

/* The native figure/title/date/content order also supports articles without a photo. */
.card-subtitle .itp-reading-time {
    display: block;
    margin-top: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    letter-spacing: normal;
    line-height: 1.6;
    text-transform: none;
}
@media (max-width: 575.98px) {
    header .container { padding: 28px 24px 6px; }
    header .text-center { display: flex; text-align: center !important; }
    header .editorial-signature {
        margin-bottom: 14px;
        font-size: 9px;
        letter-spacing: .15em;
    }
    header .gradient-text { font-size: clamp(36px, 12.4vw, 52px); }
    header #tagline {
        max-width: 440px;
        margin: 18px auto 0;
        font-size: 13px !important;
        line-height: 1.55;
        text-align: center;
    }
    main .card-columns figure > a,
    main .card-columns figure > img,
    main > .container > .card > .card-body > figure > img { border-width: 6px; }
    main > .container { margin-top: 16px !important; padding: 0 24px; }
    main > .container > .card > .card-body > .card-title {
        margin-top: 24px;
    }
    main > .container > .card > .card-body > .card-text {
        margin-top: 24px;
        font-size: 18px;
        line-height: 1.8;
    }
    .card-text > h1 { font-size: 34px; }
    .random-promo-block h4 { font-size: 25px; }
    footer { margin: 48px 24px 0; }
}

/* Approved archive composition; keep loop nodes in their original DOM order. */
main .card-columns {
    width: 100%;
    display: grid !important; /* Existing source container has inline-block. */
    --itp-archive-columns: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    column-count: auto;
    column-gap: 44px;
}
main .card-columns > .card {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    margin: 0;
    padding-top: 0;
    border: 0 !important;
    background: transparent;
}
main .card-columns > .card > .card-body {
    display: flex;
    flex: 1;
    padding: 0;
    background: transparent !important;
    flex-direction: column;
}
main .card-columns figure { margin: 0 0 18px; }
main .card-columns figure > a,
main .card-columns figure > img {
    display: block;
    width: 100%;
    height: 270px;
    background: transparent;
}
main .card-columns figure > a > img,
main .card-columns figure > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
}
main .card-columns figure > img { height: 270px; }
main .card-columns .gradient-heading {
    min-height: 2.3em;
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
    margin: 0;
    padding-top: 24px !important;
    font-size: 32px;
    line-height: 1.15;
}
main .card-columns .card-subtitle {
    margin-bottom: 18px !important;
    font-size: 13px;
    letter-spacing: 0.07em;
    line-height: 1.6;
    text-transform: uppercase;
}
main .card-columns .gradient-heading a[href] { color: var(--itp-ink); }
main .card-columns .gradient-heading a[href],
main .card-columns .gradient-heading a[href]:hover {
    text-decoration: none;
}
main .card-columns .gradient-heading a[href]:hover { color: var(--itp-accent); }
main .card-columns .card-text {
    margin-bottom: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.75;
}
main .card-columns > .card > .card-footer {
    margin-top: 20px;
    padding: 0;
    background: transparent;
    border-top: 0;
    color: var(--itp-muted);
    font-size: 13px;
    line-height: 1.8;
}
main .card-columns > .card > .card-footer a {
    color: inherit;
    text-decoration: none;
}
main .card-columns > .card > .card-footer a:hover {
    color: var(--itp-accent);
    text-decoration: underline;
}
@media (min-width: 768px) {
    main .card-columns {
        --itp-archive-columns: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 56px;
    }
    main .card-columns figure > a,
    main .card-columns figure > img { height: 300px; }
}
@media (min-width: 1160px) {
    main .card-columns figure > a,
    main .card-columns figure > img { height: 350px; }
    main .card-columns .gradient-heading { font-size: 34px; }
}
@media (max-width: 575.98px) {
    main .card-columns { gap: 36px; }
    main .card-columns .gradient-heading {
        min-height: 0;
        font-size: 29px;
    }
    main .card-columns .card-text { font-size: 16px; }
}

/* Progressive enhancement; grid remains available without JavaScript. */
main .card-columns.is-masonry {
    display: block !important;
    position: relative;
}
main .card-columns.is-masonry > .card {
    position: absolute;
    margin: 0;
}

main > .container > .card > .card-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 24px;
}
main > .container > .card > .card-footer nav > span {
    float: none !important; /* Bootstrap's existing float utility. */
    flex: 1 1 240px;
    min-width: 0;
}
main > .container > .card > .card-footer nav > span:last-child { text-align: right; }
.itp-article-navigation-hint {
    margin: 18px 0 0;
    color: var(--itp-muted);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: .025em;
}
main > .container > .card > .card-body > .card-text audio {
    min-width: 0; /* Override the WordPress audio block minimum on small screens. */
    width: 100%;
    max-width: 100%;
}
/* Separate archive pagination from the final story without changing PG actions. */
main .card-columns + .container { padding-top: 60px; } /* Existing mt-1 adds 4px. */
main:has(.card-columns) + footer { margin-top: 32px; }
@media (max-width: 575.98px) {
    main .card-columns + .container { padding-top: 36px; }
    main:has(.card-columns) + footer { margin-top: 24px; }
}

main [aria-label="Pagination"],
main .pagination {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
}
.modal-content {
    border: 1px solid var(--itp-rule);
    border-radius: 0;
    background: var(--itp-paper);
}
.modal-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
}
.modal-header,
.modal-footer { border-color: var(--itp-rule); }
.modal .btn { border-radius: 0; }
.modal .btn-dark {
    border-color: var(--itp-accent);
    background: var(--itp-accent);
    color: #fff;
}

@media (forced-colors: active) {
    header .gradient-text,
    main .gradient-text,
    .gradient-heading {
        background: none;
        color: CanvasText;
        -webkit-text-fill-color: currentColor;
    }
}