/* ==========================================================
   DON CAMILLO — SCENE 05
   PREMIUM PORTRAIT IMAGE CARDS

   Reference-inspired:
   - White rounded outer frame
   - Full-height photography
   - Soft dark gradient at bottom
   - White typography
   - Large white pill button
   - Three cards in one row
========================================================== */


/* ==========================================================
   01 — SCENE FOUNDATION
========================================================== */

#dc-experience {

    --dc05-white: #ffffff;
    --dc05-ink: #07151b;

    position: relative;

    isolation: isolate;

    width: 100%;

    margin: 0;

    padding:
        clamp(55px, 6vw, 100px)
        clamp(16px, 4vw, 70px);

    background: var(--dc-navy, #061d27);

    color: #ffffff;

    overflow: clip;

}


#dc-experience *,
#dc-experience *::before,
#dc-experience *::after {

    box-sizing: border-box;

}


/* REMOVE PREVIOUS ATMOSPHERIC BACKGROUND */

#dc-experience .dc-glass-experience__background {

    display: none !important;

}


/* ==========================================================
   02 — INNER CONTAINER
========================================================== */

#dc-experience .dc-glass-experience__inner {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

}


/* ==========================================================
   03 — THREE CARDS IN ONE ROW
========================================================== */

#dc-experience .dc-glass-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(16px, 2vw, 28px);

    align-items: stretch;

    width: 100%;

    margin: 0;

    padding: 0;

    background: transparent;

    border: 0;

    box-shadow: none;

}


/* ==========================================================
   04 — WHITE OUTER FRAME

   This creates the same thick white frame
   as your reference image.
========================================================== */

#dc-experience .dc-glass-card {

    position: relative;

    isolation: isolate;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    min-width: 0;

    min-height: 650px;

    aspect-ratio: 0.72;

    margin: 0;

    padding: 10px;

    overflow: hidden;

    border: 0;

    border-radius: 48px;

    background: #ffffff;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .18),
        0 4px 12px rgba(0, 0, 0, .08);

    transform: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


/* ==========================================================
   05 — FULL-HEIGHT IMAGE

   The photograph fills the entire interior
   of the white frame.
========================================================== */

#dc-experience .dc-glass-card__media {

    position: absolute;

    inset: 10px;

    z-index: 0;

    display: block;

    width: auto;

    height: auto;

    min-height: 0;

    overflow: hidden;

    border-radius: 39px;

    background: #10232b;

}


#dc-experience .dc-glass-card__media img {

    display: block;

    width: 100%;

    height: 100%;

    max-width: none;

    min-height: 0;

    object-fit: cover;

    object-position: center center;

    filter:
        contrast(1.07)
        saturate(.95)
        brightness(.96);

    transform: scale(1.01);

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .6s ease;

}


/* INDIVIDUAL IMAGE POSITIONING */

#dc-experience
.dc-glass-card:nth-child(1)
.dc-glass-card__media img {

    object-position: 50% 50%;

}


#dc-experience
.dc-glass-card:nth-child(2)
.dc-glass-card__media img {

    object-position: 50% 50%;

}


#dc-experience
.dc-glass-card:nth-child(3)
.dc-glass-card__media img {

    object-position: 50% 50%;

}


/* ==========================================================
   06 — DARK GRADIENT OVER THE PHOTOGRAPH

   The upper part stays clear.

   The bottom gradually darkens behind
   the text and button.

   No separate content panel.
========================================================== */

#dc-experience .dc-glass-card__media::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, .12) 48%,
        rgba(0, 0, 0, .40) 65%,
        rgba(0, 0, 0, .72) 82%,
        rgba(0, 0, 0, .88) 100%
    );

}


/* ==========================================================
   07 — CONTENT DIRECTLY OVER IMAGE
========================================================== */

#dc-experience .dc-glass-card__content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-end;

    flex: 0 0 auto;

    width: 100%;

    min-width: 0;

    min-height: 0;

    margin: 0;

    padding:
        30px
        clamp(20px, 2.2vw, 34px)
        28px;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

}


/* REMOVE OLD GLASS PANEL REFLECTIONS */

#dc-experience .dc-glass-card__content::before,
#dc-experience .dc-glass-card__content::after {

    content: none !important;

    display: none !important;

}


/* ==========================================================
   08 — WHITE CARD TITLE

   Modern bold typography matching
   the reference card.
========================================================== */

#dc-experience .dc-glass-card__title {

    margin: 0 0 12px;

    padding: 0;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(27px, 2.5vw, 38px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -.035em;

    text-align: left;

    text-transform: none;

    overflow-wrap: normal;

    word-break: normal;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, .16);

}


/* ==========================================================
   09 — DESCRIPTION
========================================================== */

#dc-experience .dc-glass-card__description {

    margin: 0 0 30px;

    padding: 0;

    max-width: 100%;

    color: rgba(255, 255, 255, .88);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.55;

    letter-spacing: 0;

    text-align: left;

}


/* ==========================================================
   10 — LARGE WHITE BUTTON

   Full width.
   Rounded pill shape.
   Positioned at the bottom of each card.
========================================================== */

#dc-experience .dc-glass-card__link {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    align-self: stretch !important;

    flex: 0 0 auto;

    width: 100% !important;

    min-width: 0;

    min-height: 58px;

    margin: 0 !important;

    padding: 17px 22px !important;

    border: 1px solid #ffffff !important;

    border-radius: 999px !important;

    background: #ffffff !important;

    color: #07151b !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .9);

    text-align: center;

    text-decoration: none !important;

    cursor: pointer;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


/* BUTTON TYPOGRAPHY */

#dc-experience .dc-glass-card__link-text {

    display: block;

    width: auto;

    color: inherit;

    font-family:
        Impact,
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: .035em;

    text-align: center;

    white-space: nowrap;

}


/* ==========================================================
   11 — REMOVE OLD BUTTON DECORATIONS
========================================================== */

#dc-experience .dc-glass-card__link-line,
#dc-experience .dc-glass-card__link-arrow {

    display: none !important;

}


/* ==========================================================
   12 — HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    #dc-experience .dc-glass-card:hover {

        transform: translateY(-5px);

        box-shadow:
            0 30px 60px rgba(0, 0, 0, .24);

    }


    #dc-experience
    .dc-glass-card:hover
    .dc-glass-card__media img {

        transform: scale(1.055);

        filter:
            contrast(1.09)
            saturate(1)
            brightness(.98);

    }


    #dc-experience
    .dc-glass-card__link:hover {

        background: #e9e9e9 !important;

        color: #07151b !important;

        transform: translateY(-2px);

        box-shadow:
            0 12px 24px rgba(0, 0, 0, .22);

    }

}


/* ==========================================================
   13 — TABLET
========================================================== */

@media (min-width: 768px) and (max-width: 1100px) {

    #dc-experience {

        padding: 65px 24px;

    }


    #dc-experience .dc-glass-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;

    }


    #dc-experience .dc-glass-card {

        min-height: 600px;

        aspect-ratio: .78;

    }


    #dc-experience .dc-glass-card:last-child {

        grid-column: 1 / -1;

        width: min(100%, 480px);

        justify-self: center;

    }


    #dc-experience .dc-glass-card__title {

        font-size: clamp(28px, 3.5vw, 38px);

    }

}


/* ==========================================================
   14 — MOBILE
========================================================== */

@media (max-width: 767px) {

    #dc-experience {

        padding: 55px 16px;

    }


    #dc-experience .dc-glass-grid {

        grid-template-columns: 1fr;

        gap: 24px;

        max-width: 440px;

        margin-inline: auto;

    }


    #dc-experience .dc-glass-card {

        width: 100%;

        min-height: 520px;

        aspect-ratio: .72;

        padding: 8px;

        border-radius: 38px;

    }


    #dc-experience .dc-glass-card__media {

        inset: 8px;

        border-radius: 31px;

    }


    #dc-experience .dc-glass-card__content {

        padding: 26px 24px 24px;

    }


    #dc-experience .dc-glass-card__title {

        font-size: clamp(28px, 7vw, 36px);

        margin-bottom: 10px;

    }


    #dc-experience .dc-glass-card__description {

        font-size: 14px;

        margin-bottom: 24px;

    }


    #dc-experience .dc-glass-card__link {

        min-height: 54px;

        padding: 15px 20px !important;

    }

}


/* ==========================================================
   15 — SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

    #dc-experience .dc-glass-card__content {

        padding: 22px 18px 20px;

    }


    #dc-experience .dc-glass-card__title {

        font-size: 26px;

    }


    #dc-experience .dc-glass-card__description {

        font-size: 13px;

    }

}


/* ==========================================================
   16 — ACCESSIBILITY
========================================================== */

#dc-experience .dc-glass-card__link:focus-visible {

    outline: 3px solid #ffffff;

    outline-offset: 4px;

}


@media (prefers-reduced-motion: reduce) {

    #dc-experience .dc-glass-card,
    #dc-experience .dc-glass-card__media img,
    #dc-experience .dc-glass-card__link {

        transition: none !important;

        transform: none !important;

    }

}

/* ==========================================================
   DON CAMILLO — SCENE 05
   FINAL CARD REFINEMENTS
   ========================================================== */


/* 01 — SECTION SPACING */

#dc-experience {

    padding:
        clamp(60px, 6vw, 100px)
        clamp(24px, 5vw, 80px);

}


/* 02 — SMALLER CARDS WITH MORE SPACE */

#dc-experience .dc-glass-experience__inner {

    max-width: 1240px;

    margin-inline: auto;

}


#dc-experience .dc-glass-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(22px, 2.5vw, 36px);

    align-items: stretch;

}


/* 03 — REMOVE THE WHITE OUTER FRAME */

#dc-experience .dc-glass-card {

    min-width: 0;

    min-height: 540px;

    aspect-ratio: 0.72;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 30px;

    background: transparent !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .18);

    overflow: hidden;

}


/* 04 — IMAGE FILLS THE ENTIRE CARD */

#dc-experience .dc-glass-card__media {

    position: absolute;

    inset: 0 !important;

    width: 100%;

    height: 100%;

    border: 0;

    border-radius: inherit;

    overflow: hidden;

}


#dc-experience .dc-glass-card__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* 05 — CONTENT SPACING */

#dc-experience .dc-glass-card__content {

    padding:
        28px
        clamp(20px, 2vw, 28px)
        26px;

}


/* 06 — TRANSPARENT BUTTON WITH WHITE BORDER */

#dc-experience .dc-glass-card__link {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 54px;

    padding: 15px 20px !important;

    margin: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, .9) !important;

    border-radius: 999px !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: none;

    backdrop-filter: none;

    text-decoration: none !important;

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


/* BUTTON TEXT */

#dc-experience .dc-glass-card__link-text {

    color: inherit !important;

    font-size: 14px;

    letter-spacing: .045em;

    text-align: center;

}


/* 07 — BUTTON HOVER */

@media (hover: hover) and (pointer: fine) {

    #dc-experience .dc-glass-card__link:hover {

        background: #ffffff !important;

        color: #07151b !important;

        border-color: #ffffff !important;

        transform: translateY(-2px);

        box-shadow: none !important;

    }

}


/* 08 — TABLET */

@media (min-width: 768px) and (max-width: 1100px) {

    #dc-experience {

        padding: 60px 30px;

    }

    #dc-experience .dc-glass-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 24px;

    }

    #dc-experience .dc-glass-card {

        min-height: 520px;

    }

    #dc-experience .dc-glass-card:last-child {

        grid-column: 1 / -1;

        width: min(100%, 400px);

        justify-self: center;

    }

}


/* 09 — MOBILE */

@media (max-width: 767px) {

    #dc-experience {

        padding: 50px 20px;

    }

    #dc-experience .dc-glass-grid {

        grid-template-columns: 1fr;

        gap: 24px;

        max-width: 390px;

        margin-inline: auto;

    }

    #dc-experience .dc-glass-card {

        width: 100%;

        min-height: 500px;

        aspect-ratio: .72;

        border-radius: 26px;

    }

    #dc-experience .dc-glass-card__content {

        padding: 24px 22px;

    }

    #dc-experience .dc-glass-card__link {

        min-height: 52px;

    }

}

/* SCENE 05 — RECTANGULAR BUTTONS */

#dc-experience .dc-glass-card__link {
    border-radius: 0 !important;
}