/*
 * Despre Noi (page 12614) presentation layer.
 * Loaded only on that page by avangard_despre_noi_assets() in functions.php.
 * Tokens follow the existing site layer: gold #DFB869, ink #333, Playfair headings, Inter body.
 *
 * Column widths are declared here rather than relying on Elementor's --width
 * alone, because the parent containers carry a column gap: 50% + 50% + gap
 * overflows and wraps. The calc() values subtract the gap share.
 */

/* ---------------- 1. Hero ---------------- */

.avg-dn-hero {
    position: relative;
    overflow: hidden;
}

/* positioning context for the stamp, so it sits at the content column's
   right edge rather than the viewport's */
.avg-dn-hero > .e-con-inner {
    position: relative;
}

.avg-dn-hero .avg-dn-stamp {
    position: absolute;
    top: 50%;
    right: 0;
    width: 150px;
    margin: 0;
    transform: translateY(-50%);
    opacity: 0.92;
    pointer-events: none;
}

.avg-dn-hero .avg-dn-stamp img {
    width: 100%;
    height: auto;
}

/* ---------------- 2. Intro composition ---------------- */

.avg-dn-intro .avg-dn-vis,
.avg-dn-intro .avg-dn-introtxt {
    flex: 0 0 calc(50% - 35px);
    max-width: calc(50% - 35px);
}

.avg-dn-intro .avg-dn-vis {
    position: relative;
    min-height: 430px;
    padding-bottom: 44px;
}

.avg-dn-intro .avg-dn-img-a {
    width: 76%;
    margin: 0;
}

.avg-dn-intro .avg-dn-img-a img,
.avg-dn-intro .avg-dn-img-b img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.avg-dn-intro .avg-dn-img-b {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 54%;
    margin: 0;
}

.avg-dn-intro .avg-dn-introtxt .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}

/* ---------------- 3. De ce Avangard ---------------- */

.avg-dn-why .avg-dn-bgrid {
    position: relative;
    width: 100%;
}

/*
 * Glass benefit cards. Values mirror the reference's .component-icon-boxes
 * .icon-box rule: translucent double gradient, 12px backdrop blur, 10px radius
 * and a half-pixel pale-gold bottom hairline.
 */
.avg-dn-why .avg-dn-bcard {
    position: relative;
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
    padding: 30px 20px;
    border-radius: 10px;
    border-bottom: 0.5px solid #F9F6BB;
    background:
        linear-gradient(176deg, #11111114 9.64%, #797a7714 49.43%, #11111114 86.28%),
        linear-gradient(229deg, #1111110a 14.03%, #797a770a 152.4%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    text-align: center;
}

/* Gold bracket under each card: the bottom hairline plus a short upturn at
   both ends, as on the reference. */
.avg-dn-why .avg-dn-bcard:before,
.avg-dn-why .avg-dn-bcard:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 14px;
    background: #F9F6BB;
}

.avg-dn-why .avg-dn-bcard:before {
    left: 0;
}

.avg-dn-why .avg-dn-bcard:after {
    right: 0;
}

.avg-dn-why .avg-dn-bcard .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.avg-dn-why .avg-dn-bcard .elementor-icon-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}

/* Icons render at their native 50x50 so all four match exactly. */
.avg-dn-why .avg-dn-bcard .elementor-icon-box-icon .elementor-icon,
.avg-dn-why .avg-dn-bcard .elementor-icon-box-icon img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    object-fit: contain;
}

.avg-dn-why .avg-dn-bcard .elementor-icon-box-icon .elementor-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.avg-dn-why .avg-dn-bcard .elementor-icon-box-title {
    margin: 0;
}

.avg-dn-why .avg-dn-bcard .elementor-icon-box-description {
    display: none;
}

/* ---------------- 4. Rezultate si impact ---------------- */

.avg-dn-stats .avg-dn-sgrid {
    width: 100%;
}

.avg-dn-stats .avg-dn-statcard {
    position: relative;
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
    background: #FFFFFF;
    border: 1px solid #DFB869;
    border-radius: 10px;
}

/*
 * Gold pennant sitting on the card's top border. The split background masks
 * the border behind it: section grey above the line, card white below.
 * top offset is half the icon height so it stays centred on the border.
 */
.avg-dn-stats .avg-dn-statarrow {
    position: absolute;
    top: -11px;
    left: 22px;
    z-index: 2;
    width: 32px;
    margin: 0;
    padding: 0 6px;
    background: linear-gradient(to bottom, #FBFBFB 50%, #FFFFFF 50%);
}

.avg-dn-stats .avg-dn-statarrow img {
    display: block;
    width: 32px;
    height: 21px;
}

.avg-dn-stats .avg-dn-stat .elementor-counter,
.avg-dn-stats .avg-dn-stat .elementor-counter-number-wrapper,
.avg-dn-stats .avg-dn-stat .elementor-counter-title {
    justify-content: center;
    text-align: center;
}

.avg-dn-stats .avg-dn-stat .elementor-counter-title {
    margin: 0;
}

.avg-dn-stats .avg-dn-statdesc {
    margin-top: 10px;
}

.avg-dn-stats .avg-dn-statdesc p:last-child {
    margin-bottom: 0;
}

/* ---------------- 5. Locatii ---------------- */

.avg-dn-loc .avg-dn-map {
    width: 100%;
    max-width: 100%;
}

/*
 * The reference shows the map on its own. The widget's side detail panel is
 * hidden here only, so the widget, its API feed and its pin interaction are
 * untouched and the panel still renders wherever else the widget is used.
 */
.avg-dn-loc .avg-map {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
}

.avg-dn-loc .avg-map__info {
    display: none;
}

.avg-dn-loc .avg-map__col {
    width: 100%;
    max-width: 900px;
}

/*
 * custom-map.png is 833x603. Giving the canvas that exact ratio instead of a
 * fixed height means the image never has to upscale past the box, so it can
 * not be clipped by .avg-map__col's overflow. It also keeps the letterbox at
 * zero, which is what the widget's pin projection measures against.
 */
.avg-dn-loc .avg-map__canvas {
    height: auto;
    aspect-ratio: 833 / 603;
}

.avg-dn-loc .avg-map__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ---------------- 6. Standardele Avangard ---------------- */

/*
 * Ported from the reference's .component-history rules so the composition,
 * measurements and decorations match one for one.
 */

.avg-dn-standards {
    position: relative;
    overflow: hidden;
}

/* .section-title */
.avg-dn-standards .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(28px, 3.6923076923076925vw, 48px);
    line-height: clamp(34px, 4.461538461538462vw, 58px);
    color: #DFB869;
    margin: 0;
    font-weight: 400;
    letter-spacing: normal;
}

/*
 * Logo tile. Sits in flow directly before the slider; the sizing and the
 * negative margins live in Elementor (compiled at .elementor-element
 * specificity, which this file cannot outrank) so they actually apply.
 * -67px bottom cancels the tabs widget's 40px top margin and overlaps it by
 * 27px; -158px top is the complement, so net height contribution is zero.
 */
.avg-dn-standards .avg-dn-histlogo {
    position: relative;
    z-index: 0;
}

/* The slider stacks above the tile, so the vault image covers its lower
   edge instead of the tile sitting on top of the image. */
.avg-dn-standards .avg-dn-tabs {
    position: relative;
    z-index: 1;
    width: 100%;
}

.avg-dn-standards .avg-dn-histlogo img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.avg-dn-standards .avg-dn-tabs .e-n-tabs {
    position: relative;
    gap: 0;
}

/* Pagination rail: empty buttons whose :before draws the gold rule. */
/*
 * Pagination rail: the five Nested Tabs buttons, restyled as stacked gold
 * rules. They keep role=tab / aria-selected / aria-controls, so clicking one
 * opens its standard and the active state stays in sync with no extra JS.
 *
 * On the reference the rail lives in a full-width wrapper, so its right:0 is
 * the viewport edge. Ours sits inside the boxed 1200px column, which put the
 * lines on top of the vault image. The negative offset cancels the column's
 * gutter so the rail clears the image; min() stops it pulling inward once the
 * viewport is narrower than the column.
 */
.avg-dn-standards .avg-dn-tabs .e-n-tabs-heading {
    position: absolute;
    top: 77px;
    right: min(0px, calc((1200px - 84vw) / 2));
    left: auto;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: auto;
    max-width: 292px;
    border: 0;
}

.avg-dn-standards .avg-dn-tabs .e-n-tab-title {
    position: relative;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 10px 0;
    padding-left: clamp(54px, 13vw, 169px);
    border: 0;
    border-radius: 0;
    background: none;
    color: #DFB869;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    text-align: right;
    cursor: pointer;
    transition: all 0.3s ease;
}

.avg-dn-standards .avg-dn-tabs .e-n-tab-title > * {
    display: none;
}

/* .history-pagination-bullet:before */
.avg-dn-standards .avg-dn-tabs .e-n-tab-title:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: clamp(48px, 11.538461538461538vw, 150px);
    height: 1px;
    background: #DFB869;
}

/* .history-pagination-bullet.active:before */
.avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true']:before {
    background: #FFFFFF;
}

/*
 * Elementor paints the selected tab with a rule carrying 0,8,0 specificity,
 * which outweighs the reset above and left a filled block behind the active
 * rule. This matches that selector and adds .avg-dn-standards so it wins,
 * while staying confined to this section: nested tabs anywhere else on the
 * site keep their default active background.
 */
.avg-dn-standards .elementor .elementor-element.elementor-widget-n-tabs:not(:has( > .elementor-widget-container)) > .e-n-tabs > .e-n-tabs-heading .e-n-tab-title[aria-selected='true'],
.avg-dn-standards .elementor-element.elementor-widget-n-tabs:not(:has( > .elementor-widget-container)) > .e-n-tabs > .e-n-tabs-heading .e-n-tab-title[aria-selected='true'] {
    background-color: transparent;
    background-image: none;
}

/* Same treatment for the hover fill on the four inactive rules. */
.avg-dn-standards .elementor .elementor-element.elementor-widget-n-tabs:not(:has( > .elementor-widget-container)) > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading .e-n-tab-title[aria-selected='false']:hover,
.avg-dn-standards .elementor-element.elementor-widget-n-tabs:not(:has( > .elementor-widget-container)) > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading .e-n-tab-title[aria-selected='false']:hover {
    background-color: transparent;
    background-image: none;
}

.avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true'],
.avg-dn-standards .avg-dn-tabs .e-n-tab-title:hover,
.avg-dn-standards .avg-dn-tabs .e-n-tab-title:focus {
    border: 0;
    background: none;
    background-color: transparent;
    box-shadow: none;
}

.avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true'] {
    color: #FFFFFF;
    font-size: 36px;
}

.avg-dn-standards .avg-dn-tabs .e-n-tabs-content {
    width: 100%;
}

/*
 * Panel transition. Without a recorded direction the panel just fades; the
 * script sets data-avg-dir on the section so forward steps enter from the
 * right and backward steps from the left.
 */
.avg-dn-standards .avg-dn-tabs .e-n-tabs-content > .e-con {
    animation: avgDnFade 0.45s ease;
}

.avg-dn-standards[data-avg-dir='next'] .avg-dn-tabs .e-n-tabs-content > .e-con {
    animation: avgDnSlideNext 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.avg-dn-standards[data-avg-dir='prev'] .avg-dn-tabs .e-n-tabs-content > .e-con {
    animation: avgDnSlidePrev 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes avgDnFade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes avgDnSlideNext {
    from {
        opacity: 0;
        transform: translateX(70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes avgDnSlidePrev {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* .history-slide */
.avg-dn-standards .e-n-tabs-content > .avg-dn-pane {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    width: 100%;
}

/* .history-content-column */
.avg-dn-standards .e-n-tabs-content .avg-dn-panetxt {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    max-width: none;
    padding: clamp(48px, 7.6923076923076925vw, 100px);
    padding-left: 0;
    border: 0;
    background: transparent;
}

/*
 * Gold hairline out to the left viewport edge.
 * Elementor reserves .e-con:before for its background overlay and sets
 * content, inset, size, border, radius, opacity and blend mode on it, so
 * every one of those is reset here or the overlay geometry wins.
 */
.avg-dn-standards .e-n-tabs-content .avg-dn-panetxt:before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    bottom: auto;
    left: auto;
    z-index: 1;
    display: block;
    width: calc((100vw - 200%) / 2);
    height: 1px;
    border: 0;
    border-radius: 0;
    opacity: 1;
    mix-blend-mode: normal;
    transition: none;
    background: #DFB869;
}

/* .history-content-background */
.avg-dn-standards .e-n-tabs-content .avg-dn-panetxt:after {
    content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: -1;
    display: block;
    width: 50vw;
    height: 100%;
    border-radius: 0 10px 10px 0;
    background: #333333;
    box-shadow: 0 0 20px 2px #492a0005;
}

/* .history-year */
.avg-dn-standards .e-n-tabs-content .avg-dn-panetitle {
    position: absolute;
    top: -40px;
    left: 20px;
    margin: 0;
}

.avg-dn-standards .e-n-tabs-content .avg-dn-panetitle .elementor-heading-title {
    margin: 0;
    color: #DFB869;
}

/* The gradient fill only replaces the solid colour where it can actually
   paint, so the title can never end up invisible. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .avg-dn-standards .e-n-tabs-content .avg-dn-panetitle .elementor-heading-title {
        background: linear-gradient(177deg, #F9F6BB -28.82%, #DFB869 111.37%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.avg-dn-standards .e-n-tabs-content .avg-dn-panetxt p:last-child {
    margin-bottom: 0;
}

/* .history-image-column */
.avg-dn-standards .e-n-tabs-content .avg-dn-paneimg {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
}

/*
 * Kept in flow rather than absolutely positioned: the grid row centres it
 * anyway, and an absolute child collapsed the column to zero height.
 */
.avg-dn-standards .e-n-tabs-content .avg-dn-paneshot {
    width: 100%;
}

.avg-dn-standards .e-n-tabs-content .avg-dn-paneshot img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}
/* Prev / next arrows */

/*
 * Prev / next controls.
 *
 * Anchored to the standards content container, never the viewport: the left
 * offset is a percentage of the boxed content column, which puts the pair
 * under the text/content half rather than under the whole composition. The
 * negative top margin lifts them so they straddle the lower edge of the
 * composition, matching the reference rather than sitting below everything.
 */
.avg-dn-standards .avg-dn-nav {
    position: relative;
    z-index: 4;
    width: auto;
    margin-top: -20px;
    padding-left: 33%;
}

/* .history-nav-prev / .history-nav-next */
.avg-dn-standards .avg-dn-navbtn .elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: #DFB869;
    color: #333333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.avg-dn-standards .avg-dn-navbtn .elementor-button:hover {
    background: #E8CC93;
}

/* Disabled end-of-range state: prev on the first standard, next on the last. */
.avg-dn-standards .avg-dn-navbtn .elementor-button[aria-disabled='true'],
.avg-dn-standards .avg-dn-navbtn.is-disabled .elementor-button {
    background-color: #89703E;
    cursor: default;
}

.avg-dn-standards .avg-dn-navbtn .elementor-button[aria-disabled='true']:hover {
    background-color: #89703E;
}

.avg-dn-standards .avg-dn-navbtn .elementor-button-text {
    display: none;
}

.avg-dn-standards .avg-dn-navbtn .elementor-button-content-wrapper,
.avg-dn-standards .avg-dn-navbtn .elementor-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.avg-dn-standards .avg-dn-navbtn .elementor-button-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: #333333;
}

@media (prefers-reduced-motion: reduce) {
    .avg-dn-standards .avg-dn-tabs .e-n-tabs-content > .e-con,
    .avg-dn-standards[data-avg-dir='next'] .avg-dn-tabs .e-n-tabs-content > .e-con,
    .avg-dn-standards[data-avg-dir='prev'] .avg-dn-tabs .e-n-tabs-content > .e-con {
        animation: none;
    }
}
/* ---------------- 7. Echipa Avangard ---------------- */

.avg-dn-team .avg-dn-teamtxt {
    flex: 0 0 calc(46% - 35px);
    max-width: calc(46% - 35px);
}

.avg-dn-team .avg-dn-teamgrid {
    flex: 0 0 calc(54% - 35px);
    max-width: calc(54% - 35px);
}

/* .team-member-card */
.avg-dn-team .avg-dn-member {
    flex: 0 0 360px;
    max-width: 360px;
    padding: 10px;
    margin-bottom: 10px;
    border: 0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 2px #492a0005;
    text-align: center;
}

/* .member-image-wrapper */
.avg-dn-team .avg-dn-memberphoto {
    position: relative;
    width: 100%;
    height: 272px;
    margin: 0 auto 20px;
    border-radius: 10px;
    overflow: hidden;
}

.avg-dn-team .avg-dn-memberimg,
.avg-dn-team .avg-dn-memberimg .elementor-widget-container,
.avg-dn-team .avg-dn-memberimg figure {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* .member-image */
.avg-dn-team .avg-dn-memberimg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Prev / next arrows, same treatment as the standards slider. */
.avg-dn-team .avg-dn-teamnav {
    width: auto;
}

.avg-dn-team .avg-dn-navbtn .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #DFB869;
    color: #111111;
    transition: background 0.2s ease, transform 0.2s ease;
}

.avg-dn-team .avg-dn-navbtn .elementor-button:hover {
    background: #E8CC93;
    transform: translateY(-2px);
}

.avg-dn-team .avg-dn-navbtn .elementor-button-text {
    display: none;
}

.avg-dn-team .avg-dn-navbtn .elementor-button-icon {
    display: inline-flex;
    margin: 0;
}

.avg-dn-team .avg-dn-navbtn .elementor-button-icon svg {
    width: 14px;
    height: 14px;
    fill: #111111;
}
/* ---------------- Responsive ---------------- */

@media (max-width: 1024px) {
    .avg-dn-hero .avg-dn-stamp {
        right: 0;
        width: 147px;
        opacity: 0.9;
    }

    .avg-dn-intro .avg-dn-vis,
    .avg-dn-intro .avg-dn-introtxt,
    .avg-dn-team .avg-dn-teamtxt,
    .avg-dn-team .avg-dn-teamgrid {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* --- Echipa Avangard: tablet / mobile composition ---
       display:contents lifts the intro column's children into the section's
       own column flow, which is the only way to get the arrows below the card
       when they live inside that column in the markup. */
    .avg-dn-team .avg-dn-teamtxt {
        display: contents;
    }

    .avg-dn-team .avg-dn-teamgrid {
        order: 1;
        justify-content: center;
    }

    .avg-dn-team .avg-dn-teamnav {
        order: 2;
        align-self: center;
        gap: 30px;
        margin-top: 26px;
    }

    /*
     * Plain arrows below 1024, as on the reference: the gold box is dropped
     * and the uploaded keft-arrow.svg is painted as the button background.
     * Only a left arrow exists, so the next button mirrors the same file.
     */
    .avg-dn-team .avg-dn-navbtn .elementor-button,
    .avg-dn-team .avg-dn-navbtn .elementor-button:hover {
        width: 24px;
        height: 24px;
        border-radius: 0;
        background: transparent url("https://1258145.eu9.myftpupload.com/wp-content/uploads/2026/09/keft-arrow.svg") no-repeat center / 24px 24px;
        box-shadow: none;
        transform: none;
    }

    .avg-dn-team .avg-dn-navbtn .elementor-button-icon {
        display: none;
    }

    .avg-dn-team .avg-dn-tnext .elementor-button,
    .avg-dn-team .avg-dn-tnext .elementor-button:hover {
        transform: scaleX(-1);
    }

    .avg-dn-team .avg-dn-member {
        flex: 0 0 100%;
        max-width: 695px;
        margin: 0 auto 10px;
    }

    .avg-dn-team .avg-dn-memberphoto {
        height: 280px;
    }

    /* --- Mai mult decat un furnizor: text above the images, as on the
       reference. Both images stay square. The offset one is 3/4 the size of
       the front image and hangs past its lower edge; padding-bottom on the
       column reserves that overhang so it can't spill into the next section. --- */
    .avg-dn-intro .avg-dn-introtxt {
        order: 1;
    }

    .avg-dn-intro .avg-dn-vis {
        order: 2;
        min-height: 0;
        padding-bottom: 6%;
    }

    .avg-dn-intro .avg-dn-img-a {
        width: 72%;
    }

    .avg-dn-intro .avg-dn-img-b {
        top: auto;
        right: 0;
        bottom: 0;
        width: 54%;
    }

    .avg-dn-intro .avg-dn-img-a img,
    .avg-dn-intro .avg-dn-img-b img {
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 20px #0000001a;
    }

    .avg-dn-why .avg-dn-bcard {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }

    .avg-dn-stats .avg-dn-statcard {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    /* --- Standardele Avangard: tablet composition --- */

    /* the tile sits over the vault image here, not behind it */
    .avg-dn-standards .avg-dn-histlogo {
        z-index: 2;
    }

    .avg-dn-standards .avg-dn-nav {
        margin-top: 26px;
        padding-left: 0;
    }

    /* image first, grey panel below overlapping its lower edge */
    .avg-dn-standards .e-n-tabs-content > .avg-dn-pane {
        grid-template-columns: 1fr;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-paneimg {
        order: 1;
    }

    /* the grey box is inset 24px by :after, so the horizontal padding has to
       clear that inset before it reads as padding inside the box */
    .avg-dn-standards .e-n-tabs-content .avg-dn-panetxt {
        order: 2;
        z-index: 3;
        margin-top: -70px;
        padding: 40px 49px 35px 69px;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-panetxt:before {
        display: none;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-panetxt:after {
        right: 24px;
        left: 24px;
        width: auto;
        border-radius: 10px;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-panetitle {
        position: absolute;
        top: -40px;
        left: 69px;
        margin: 0;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-paneshot {
        text-align: center;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-paneshot img {
        width: 295px;
        height: 295px;
        max-width: 100%;
        max-height: none;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* pagination rail: stacked on the left, in the gap above the image */
    .avg-dn-standards .avg-dn-tabs .e-n-tabs-heading {
        top: auto;
        right: auto;
        bottom: calc(100% + 16px);
        left: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;
        max-width: none;
    }

    /* width on the button, not padding, so the line stays clickable */
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title,
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true'] {
        width: 64px;
        padding-left: 0;
        font-size: 0;
    }

    .avg-dn-standards .avg-dn-tabs .e-n-tab-title:before {
        width: 100%;
    }
}

@media (max-width: 767px) {
    /* lower-right on mobile, sitting about three quarters down the banner
       rather than vertically centred */
    .avg-dn-hero .avg-dn-stamp {
        top: auto;
        right: 0;
        bottom: 51px;
        width: 147px;
        opacity: 0.9;
        transform: none;
    }

    /* same proportions as tablet; only the section padding differs */
    .avg-dn-intro .avg-dn-img-b {
        margin: 0;
    }

    .avg-dn-why .avg-dn-bcard {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
        padding: 22px 10px;
    }

    .avg-dn-why .avg-dn-bcard .elementor-icon-box-wrapper {
        gap: 12px;
    }

    .avg-dn-stats .avg-dn-statcard {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* --- Standardele Avangard: mobile composition --- */

    .avg-dn-standards .avg-dn-tabs .e-n-tab-title,
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true'] {
        width: 48px;
    }

    .avg-dn-standards .avg-dn-tabs .e-n-tabs-heading {
        bottom: calc(100% + 75px);
        gap: 16px;
    }

    /* the grey box is inset 12px by :after here, so the padding has to clear
       that before it reads as spacing inside the box */
    .avg-dn-standards .e-n-tabs-content .avg-dn-panetxt {
        margin-top: -60px;
        padding: 30px 32px 30px 36px;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-panetitle {
        left: 36px;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-panetxt:after {
        right: 12px;
        left: 12px;
    }

    .avg-dn-standards .e-n-tabs-content .avg-dn-paneshot img {
        max-height: 300px;
    }

    .avg-dn-team .avg-dn-member {
        max-width: 303px;
    }

    .avg-dn-team .avg-dn-memberphoto {
        height: 275px;
    }

    .avg-dn-team .avg-dn-teamnav {
        margin-top: 22px;
    }

    /*
     * The shared gold button sets white-space:nowrap with 30px/80px padding,
     * so at 375px its intrinsic width is wider than the column and it spills
     * off the right instead of sitting centred. Trimmed and allowed to wrap
     * so it can never exceed the container and the side gaps stay equal.
     */
    .avg-dn-loc .avg-btn-gold {
        text-align: center;
    }

    .avg-dn-loc .avg-btn-gold .elementor-button {
        max-width: 100%;
        padding: 11px 18px;
        padding-right: 62px;
        font-size: 14px;
        letter-spacing: 0.05rem;
    }

    .avg-dn-loc .avg-btn-gold .elementor-button .elementor-button-text {
        white-space: normal;
    }
}

/* Client doc #22: live .history-pagination switches layout at max-width:992px,
   not 1024px, and keeps the text labels there. 993-1024px: the desktop label
   rules are restored. <=992px: live values - in-flow column above the image,
   15px gap, 20px/75px margins, 20px side padding, centred 16px labels with the
   clamp line, active label 24px. Placed last so it follows every earlier rule. */
@media (min-width: 993px) and (max-width: 1024px) {
    .avg-dn-standards .avg-dn-tabs .e-n-tabs-heading { top: 77px; right: min(0px, calc((1200px - 84vw) / 2)); bottom: auto; left: auto; gap: 20px; max-width: 292px; }
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title,
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true'] { width: auto; padding-left: clamp(54px, 13vw, 169px); font-size: 16px; }
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true'] { font-size: 36px; }
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title:before { width: clamp(48px, 11.538461538461538vw, 150px); }
}
@media (max-width: 992px) {
    .avg-dn-standards .avg-dn-tabs .e-n-tabs-heading { position: relative; top: auto; right: auto; bottom: auto; left: auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 15px; max-width: none; margin: 20px 0 75px; padding: 0 20px; }
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title,
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true'] { width: auto; padding-left: clamp(54px, 13vw, 169px); font-size: 16px; text-align: center; }
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title[aria-selected='true'] { font-size: 24px; }
    .avg-dn-standards .avg-dn-tabs .e-n-tab-title:before { width: clamp(48px, 11.538461538461538vw, 150px); }
}

/* #103 banner height, as live (.component-hero .hero-wrapper): min-height 450px,
   padding clamp(40px,3.846vw,50px) top and bottom at every width; below 750px the
   minimum is removed (min-height:0). Overrides the container's Elementor values
   (540/450/520px, 100/70/50px padding). */
.elementor .elementor-element.e-con.avg-dn-hero {
    --min-height: 450px;
    --padding-top: clamp(40px, 3.8461538461538463vw, 50px);
    --padding-bottom: clamp(40px, 3.8461538461538463vw, 50px);
}
@media (max-width: 749px) {
    .elementor .elementor-element.e-con.avg-dn-hero { --min-height: 0px; }
}

/* Explorează produse din aur și argint (section copied from Vinde Aur, .avg-va-cards):
   the component's rules, taken verbatim from avangard_va_css() - that stylesheet only
   loads on Vinde Aur. The two page-scoped rules are re-scoped to this page (12614). */
.avg-va-cardhead .elementor-heading-title { max-width: 640px; margin: 0 auto 14px; font-family: var(--font-heading-family, 'Playfair Display', serif); font-size: clamp(19px, calc(16px + 1.4vw), 28px); line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; text-align: center; color: #DFB869; }
.avg-va-cardhead { margin-bottom: 40px; width: 100%; }
.avg-va-cardgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.avg-va-cards .avg-va-card { position: relative; display: flex; flex-direction: column; align-items: stretch; height: 100%; overflow: hidden; border: 0; border-radius: 10px; background: #000; box-shadow: none; text-decoration: none; color: inherit; }
.avg-va-cards .avg-va-card:focus-visible { outline: 2px solid #DFB869; outline-offset: 2px; }
.avg-va-cards .avg-va-card--featured { grid-column: span 2; }
.avg-va-cards .avg-va-card__media { flex: none; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.avg-va-cards .avg-va-card__media img { display: block; width: 100%; height: 100%; padding: 24px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 0; transition: transform .5s ease; }
.avg-va-cards .avg-va-card:hover .avg-va-card__media img { transform: scale(1.04); }
.avg-va-cards .avg-va-card__content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; text-align: left; }
.avg-va-cards .avg-va-card__title .elementor-heading-title { margin: 0; font-family: var(--font-heading-family, 'Playfair Display', serif); font-size: 17px; line-height: 1.3; font-weight: 400; color: #DFB869; }
.avg-va-cards .avg-va-card__desc { margin-top: 6px; }
.avg-va-cards .avg-va-card__desc p { margin: 0; font-family: Inter, sans-serif; font-size: 14px; line-height: 1.5; font-weight: 400; color: #fff; }
.avg-va-cards .avg-va-card__cta { margin-top: 12px; }
.avg-va-cards .avg-va-card__cta .elementor-heading-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-family: Inter, sans-serif; font-size: 14px; line-height: 1.5; font-weight: 600; color: #DFB869; }
.avg-va-cards .avg-va-card__cta .elementor-heading-title::after { content: ""; flex: 0 0 auto; width: 13px; height: 13px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml;utf8,<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.5 6.5h9M7.5 3l3.5 3.5L7.5 10' stroke='%23DFB869' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); transition: transform .2s ease; }
.avg-va-cards .avg-va-card:hover .avg-va-card__cta .elementor-heading-title::after { transform: translateX(3px); }
.elementor-12614 .e-con .elementor-element.avg-va-cardhead .elementor-heading-title { line-height: 1.15; }
.elementor-12614 .avg-va-cards .avg-va-card__content.e-con { --gap: 0px; --row-gap: 0px; }
@media screen and (min-width: 600px) {
    .avg-va-cards .avg-va-card--featured { flex-direction: row; align-items: stretch; }
    .avg-va-cards .avg-va-card--featured .avg-va-card__media { flex: 0 0 42%; aspect-ratio: auto; height: auto; }
}
@media screen and (max-width: 989px) {
    .avg-va-cardgrid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 599px) {
    .avg-va-cardgrid { grid-template-columns: 1fr; gap: 16px; }
    .avg-va-cards .avg-va-card--featured { grid-column: span 1; flex-direction: column; }
    .avg-va-cards .avg-va-card--featured .avg-va-card__media { flex: none; width: 100%; aspect-ratio: 4 / 3; }
}

/* Rezultate și impact (stats cards): one column on tablet and mobile (requested).
   Desktop keeps the four-across row. */
@media (max-width: 1024px) {
    .elementor .elementor-element.e-con.avg-dn-sgrid {
        --flex-direction: column;
        --flex-wrap: nowrap;
        --flex-wrap-mobile: nowrap;
    }
    .elementor .elementor-element.e-con.avg-dn-sgrid > .elementor-element {
        --width: 100%;
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
    }
}

/* Banner text, as live (tablet + mobile, requested). Live .component-hero:
   pre-title clamp(12px,1.0769vw,14px)/400/1/.03em with clamp(15px,1.9231vw,25px)
   below it; title clamp(28px,3.6923vw,48px), line-height clamp(34px,4.4615vw,58px),
   weight 500, normal letter-spacing; paragraphs 16px/1.6/.06rem starting
   clamp(10px,1.9231vw,25px) under the title. Desktop keeps its own sizes. */
@media (max-width: 1024px) {
    .avg-dn-hero .avg-eyebrow .elementor-heading-title {
        font-family: Inter, sans-serif !important;
        font-size: clamp(12px, 1.0769vw, 14px) !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        letter-spacing: .03em !important;
        margin: 0 0 clamp(15px, 1.9231vw, 25px) !important;
    }
    .avg-dn-hero h1,
    .avg-dn-hero h1.elementor-heading-title {
        font-size: clamp(28px, 3.6923vw, 48px) !important;
        line-height: clamp(34px, 4.4615vw, 58px) !important;
        font-weight: 500 !important;
        letter-spacing: normal !important;
        margin: 0 !important;
    }
    .avg-dn-hero .elementor-widget-text-editor { margin-top: clamp(10px, 1.9231vw, 25px) !important; }
    .avg-dn-hero .elementor-widget-text-editor p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        letter-spacing: .06rem !important;
    }
}


/* Ce poti accesa prin Avangard Gold: intro under the heading, as live
   (.card-grid-section__header: heading 14px above the intro, 40px below it,
   max-width 640px, 14px/1.6 Inter #4d4d4d, body letter-spacing .06rem). */
.elementor-12614 .avg-va-cards.e-con { --gap: 0px; --row-gap: 0px; }
.elementor-12614 .avg-va-cards .elementor-element.avg-va-cardhead { margin-bottom: 0; }
.elementor-12614 .avg-va-cards .elementor-element.avg-va-cardintro { width: 100%; max-width: 640px; margin: 0 auto 40px; text-align: center; }
.elementor-12614 .avg-va-cards .avg-va-cardintro p { margin: 0 0 .6em; font-family: Inter, sans-serif; font-size: 14px; line-height: 1.6; font-weight: 400; letter-spacing: .6px; color: #4d4d4d; text-align: center; }
.elementor-12614 .avg-va-cards .avg-va-cardintro p:last-child { margin-bottom: 0; }
