/*
 * Editorial article page: the Elementor Pro template «Blog - Single Post» (1084, EN 3372, ES 3374), whose container has
 * the class twf-article. Enqueued on articles only, by inc/editorial.php.
 *
 * Option C, chosen by Pedro on 11/11/2026 and made compact because the client dislikes wide margins:
 * - a centred header: «Editorial» (a link to the brand's Editorial page), the title with a gold line, the date;
 * - the whole featured photo at 3:2, up to 1100 px, and the text in a column of 820 px;
 * - the share row, then «Editorial» with three of the brand's articles, as wide as the photo.
 *
 * Sizes and colours come from the kit's global fonts and colours (Elementor kit 28) through their CSS variables, so a
 * change in Site Settings reaches the article too. The template sets the type of its own widgets (title, date, share
 * title, the «Editorial» title and cards); this file sets what Elementor cannot reach: the post's text and the layout.
 * html:not(#twf) outranks the values Elementor writes for each element.
 */

/* ==========================================================================
   The column: centred; the header and the text narrower than the photo and the cards
   ========================================================================== */

html:not(#twf) .twf-article > .e-con-inner{
    align-items: center;
    row-gap: 0;
}

html:not(#twf) .twf-article .elementor-widget-shortcode,
html:not(#twf) .twf-article .elementor-widget-theme-post-title,
html:not(#twf) .twf-article .elementor-widget-post-info{
    width: 100%;
    max-width: 960px;
    text-align: center;
}

/* ==========================================================================
   Header: «Editorial», the title with its gold line, the date
   ========================================================================== */

.twf-article__eyebrow{
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--e-global-typography-twfeye-font-family), sans-serif;
    font-size: var(--e-global-typography-twfeye-font-size);
    font-weight: var(--e-global-typography-twfeye-font-weight);
    line-height: var(--e-global-typography-twfeye-line-height);
    letter-spacing: var(--e-global-typography-twfeye-letter-spacing);
    text-transform: var(--e-global-typography-twfeye-text-transform);
    color: var(--e-global-color-accent);
    text-decoration: none;
    transition: color .3s cubic-bezier(.22, .61, .36, 1);
}

.twf-article__eyebrow:hover,
.twf-article__eyebrow:focus-visible{
    color: var(--e-global-color-primary);
}

html:not(#twf) .twf-article .elementor-widget-theme-post-title::after{
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: 18px auto 14px;
    background: var(--e-global-color-accent);
}

html:not(#twf) .twf-article .elementor-widget-post-info .elementor-icon-list-items{
    justify-content: center;
}

/* ==========================================================================
   The featured photo: whole, at 3:2, as wide as the cards at the end
   ========================================================================== */

html:not(#twf) .twf-article .elementor-widget-theme-post-featured-image{
    width: 100%;
    max-width: 1100px;
    margin: 28px 0 32px;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-featured-image img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* ==========================================================================
   The text, in a column of 820 px
   ========================================================================== */

html:not(#twf) .twf-article .elementor-widget-theme-post-content,
html:not(#twf) .twf-article .twf-article__share{
    width: 100%;
    max-width: 820px;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content p{
    margin: 0 0 14px;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content p strong{
    color: var(--e-global-color-primary);
}

/* The first sentence reads as the introduction: the «Destaque» font, in ink. Its own bold gives way to the size. */
html:not(#twf) .twf-article .elementor-widget-theme-post-content .elementor-widget-container > p:first-child{
    margin-bottom: 20px;
    font-family: var(--e-global-typography-twflead-font-family), sans-serif;
    font-size: var(--e-global-typography-twflead-font-size);
    font-weight: var(--e-global-typography-twflead-font-weight);
    line-height: var(--e-global-typography-twflead-line-height);
    color: var(--e-global-color-primary);
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content .elementor-widget-container > p:first-child strong{
    font-weight: inherit;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content h2{
    margin: 32px 0 10px;
    font-family: var(--e-global-typography-twfsub-font-family), sans-serif;
    font-size: var(--e-global-typography-twfsub-font-size);
    font-weight: var(--e-global-typography-twfsub-font-weight);
    line-height: var(--e-global-typography-twfsub-line-height);
    letter-spacing: normal;
    text-transform: none;
    color: var(--e-global-color-primary);
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content h3{
    margin: 24px 0 8px;
    font-family: var(--e-global-typography-twfsmall-font-family), sans-serif;
    font-size: var(--e-global-typography-twfsmall-font-size);
    font-weight: var(--e-global-typography-twfsmall-font-weight);
    line-height: var(--e-global-typography-twfsmall-line-height);
    letter-spacing: normal;
    text-transform: none;
    color: var(--e-global-color-primary);
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content a{
    color: var(--e-global-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .3s cubic-bezier(.22, .61, .36, 1);
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content a:hover{
    color: var(--e-global-color-accent);
}

/* Lists (the press references): a short gold line instead of the bullet. */
html:not(#twf) .twf-article .elementor-widget-theme-post-content ul{
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content ul li{
    position: relative;
    margin: 0 0 6px;
    padding-left: 24px;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content ul li::before{
    content: "";
    position: absolute;
    top: .8em;
    left: 0;
    width: 12px;
    height: 1px;
    background: var(--e-global-color-accent);
}

/* Images inside the text (Pedro, 11/11/2026, option A of three): a wide image (4:3 and wider, TWF_EDITORIAL_WIDE) fills
   the column, a square or upright one stays centred and at most 520 px high, and none is cut. inc/editorial.php gives
   each image block the class twf-figure--wide or twf-figure--tall from its file's proportions, on the block's outer
   tag: the figure, or the div.wp-block-image WordPress wraps an aligned image's figure in. Only the top and bottom
   margins are set: the sides stay WordPress's, which centre a block set to «centre». The width the block editor writes
   on a resized image (an inline style, hence !important) gives way to these rules. */
html:not(#twf) .twf-article .elementor-widget-theme-post-content .wp-block-image{
    margin-top: 32px;
    margin-bottom: 32px;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content .wp-block-image > figure{
    margin-top: 0;
    margin-bottom: 0;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content img{
    max-width: 100%;
    height: auto;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content .twf-figure--wide,
html:not(#twf) .twf-article .elementor-widget-theme-post-content .twf-figure--wide > figure{
    display: block;
    width: 100%;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content .twf-figure--wide img{
    display: block;
    width: 100% !important;
    height: auto !important;
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content .twf-figure--tall img{
    display: block;
    width: auto !important;
    height: auto !important;
    max-height: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* A spacer block gives way to the text's own spacing, 20 to 32 px between blocks (Pedro, 11/11/2026): the old Eutopia
   article «Elevate Your Style» put 60 px more over its logo. */
html:not(#twf) .twf-article .elementor-widget-theme-post-content .wp-block-spacer{
    display: none;
}

/* The closing signature («WESTMISTER — LEGACY AW26» and its lines): a paragraph that starts in bold and breaks its
   lines. The older articles' paragraphs with line breaks start with plain text, so they keep the text's look. */
html:not(#twf) .twf-article .elementor-widget-theme-post-content p:has(> br):has(> strong:first-child){
    position: relative;
    margin-top: 32px;
    padding-top: 20px;
    color: var(--e-global-color-primary);
}

html:not(#twf) .twf-article .elementor-widget-theme-post-content p:has(> br):has(> strong:first-child)::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--e-global-color-accent);
}

/* ==========================================================================
   Share: one line under the text
   ========================================================================== */

html:not(#twf) .twf-article .twf-article__share{
    align-items: center;
    gap: 22px;
    margin: 32px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(33, 37, 41, .14);
}

html:not(#twf) .twf-article .twf-article__share > .elementor-widget{
    width: auto;
    margin: 0;
}

/* ==========================================================================
   «Editorial»: three of the brand's articles, as wide as the photo
   ========================================================================== */

html:not(#twf) .twf-article .twf-article__more{
    width: 100%;
    max-width: 1100px;
    margin: 65px 0 0;
    padding: 0;
}

html:not(#twf) .twf-article .twf-article__more .elementor-widget-heading{
    margin-bottom: 40px;
}

/* «Ler mais» in the global «Ligação» font: style.css gives every post grid's link 18 px. */
html:not(#twf) .twf-article .twf-article__more .reyEl-bpost-footer .btn{
    font-family: var(--e-global-typography-twflink-font-family), sans-serif;
    font-size: var(--e-global-typography-twflink-font-size);
    font-weight: var(--e-global-typography-twflink-font-weight);
    line-height: var(--e-global-typography-twflink-line-height);
}

html:not(#twf) .twf-article .twf-article__more .reyEl-bpost-thumb img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

@media (max-width: 767px){
    html:not(#twf) .twf-article .elementor-widget-theme-post-featured-image{
        margin: 20px 0 24px;
    }

    html:not(#twf) .twf-article .twf-article__more{
        margin-top: 40px;
    }
}