/*
 * Graduation Save the Date built with Elementor.
 * Every section container carries "std-el"; widgets and inner containers carry std-* classes
 * (Advanced → CSS Classes). Duplicated pages and copied sections keep the same look.
 */

/* ---------- Layout reset for Elementor containers and widgets ---------- */

.std-el.e-con {
    --content-width: min(calc(100% - 48px), var(--container));
    --padding-top: 120px;
    --padding-bottom: 120px;
    --padding-left: 0px;
    --padding-right: 0px;
    position: relative;
}

.std-el .e-con,
.std-el.e-con > .e-con-inner {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    --gap: 0px;
    --row-gap: 0px;
    --column-gap: 0px;
}

.std-el .elementor-element.elementor-widget {
    margin-block-end: 0;
}

.std-el .elementor-heading-title {
    line-height: inherit;
}

.std-el .elementor-widget-text-editor p {
    margin: 0 0 16px;
}

.std-el .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}

/* Elementor caps widgets with ".e-con > .elementor-widget { max-width: 100% }" */
.std-el .e-con > .elementor-widget.std-text { max-width: 600px; }
.std-el .e-con > .elementor-widget.std-description { max-width: 650px; }
.std-el .e-con > .elementor-widget.std-hero-text { max-width: 680px; }
.std-el .e-con > .elementor-widget.std-celebration-text { max-width: 760px; }
.std-el .e-con > .elementor-widget.std-note { max-width: 850px; }
.std-el .std-soon > .elementor-widget.std-text { max-width: 680px; }

/* ---------- Shared pieces ---------- */

.std-el .std-eyebrow .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--teal-500);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.7;
    text-transform: uppercase;
}

.std-el .std-eyebrow .elementor-heading-title::before {
    width: 32px;
    height: 2px;
    background: currentColor;
    content: "";
}

.std-el .std-title .elementor-heading-title {
    max-width: 760px;
    margin: 0;
    color: var(--gray-900);
    font-family: var(--font-heading);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.std-el .std-text {
    max-width: 600px;
    margin-top: 26px;
    color: var(--gray-500);
    font-size: 17px;
}

.std-el .std-text p {
    margin-bottom: 26px;
}


.std-el .std-heading-row {
    margin-bottom: 64px;
}

.std-el .std-heading-row > .e-con {
    --width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.std-el .std-heading-row > .std-description {
    flex: 0 1 650px;
}

@media (max-width: 767px) {
    .std-el .std-heading-row > .e-con,
    .std-el .std-heading-row > .std-description {
        flex: 0 0 auto;
    }
}

.std-el .std-description {
    max-width: 650px;
    color: var(--gray-500);
    font-size: 18px;
}


/* Buttons */

.std-el .std-btn .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.std-el .std-btn .elementor-button:hover {
    transform: translateY(-2px);
}

.std-el .std-btn-gold .elementor-button {
    background: var(--gold-500);
    color: var(--navy-950);
}

.std-el .std-btn-gold .elementor-button:hover {
    background: #f0bc5e;
    color: var(--navy-950);
}

.std-el .std-btn-ghost .elementor-button {
    border-color: rgba(255, 255, 255, 0.45);
    background: transparent;
    color: var(--white);
}

.std-el .std-btn-ghost .elementor-button:hover {
    border-color: var(--white);
    background: var(--white);
    color: var(--navy-900);
}

/* ---------- Hero ---------- */

.std-el.std-hero {
    --display: flex;
    --justify-content: center;
    --padding-top: 180px;
    --padding-bottom: 100px;
    min-height: 760px;
    overflow: hidden;
    color: var(--white);
    background-color: var(--navy-950);
    background-position: center center;
    background-size: cover;
}

.std-el.std-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 21, 34, 0.96) 0%, rgba(7, 21, 34, 0.9) 42%, rgba(7, 21, 34, 0.45) 100%);
    content: "";
    pointer-events: none;
}

.std-el.std-hero::after {
    position: absolute;
    top: -200px;
    right: -120px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(231, 168, 58, 0.25);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.std-el.std-hero > .e-con-inner {
    position: relative;
    z-index: 2;
    justify-content: center;
}

.std-el .std-hero-content {
    max-width: 820px;
}

.std-el .std-label .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--gold-500);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.7;
    text-transform: uppercase;
}

.std-el .std-label .elementor-heading-title::before {
    font-size: 15px;
    content: "✦";
}

.std-el .std-badge .elementor-heading-title {
    display: inline-flex;
    margin: 0 0 22px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold-500);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.std-el .std-hero-title .elementor-heading-title {
    max-width: 12ch;
    margin: 0 0 28px;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.02;
}

.std-el .std-hero-title .elementor-heading-title span {
    color: var(--teal-400);
}

.std-el .std-hero-text {
    max-width: 680px;
    margin-bottom: 34px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}

.std-el .std-actions {
    margin-bottom: 45px;
}

.std-el .std-actions > .elementor-widget,
.std-el .std-dates > .e-con {
    --width: auto;
    width: auto;
}

.std-el .std-pill {
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

.std-el .std-pill-city .elementor-heading-title {
    color: var(--gold-500);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.7;
    text-transform: uppercase;
}

.std-el .std-pill-date .elementor-heading-title {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

/* ---------- A Milestone Worth Celebrating ---------- */

.std-el .std-highlight,
.std-el .std-event-card {
    position: relative;
}

.std-el .std-highlight {
    overflow: hidden;
    padding: 50px;
    border-radius: 20px;
    background: var(--navy-900);
}

.std-el .std-watermark {
    position: absolute;
    right: -20px;
    bottom: -65px;
    width: auto;
    pointer-events: none;
}

.std-el .std-watermark .elementor-heading-title {
    color: rgba(255, 255, 255, 0.04);
    font-family: var(--font-heading);
    font-size: 10rem;
    font-weight: 800;
    line-height: 1.7;
}

.std-el .std-highlight-title .elementor-heading-title {
    position: relative;
    margin: 0 0 16px;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.std-el .std-highlight-text {
    position: relative;
    color: rgba(255, 255, 255, 0.72);
}

.std-el .std-schools {
    padding-top: 80px;
}

.std-el .std-schools-grid {
    margin-top: 35px;
}

.std-el .std-participant {
    padding: 30px;
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    background: var(--white);
    text-align: center;
}

.std-el .std-participant-icon .elementor-heading-title {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #edf8f8;
    font-size: 23px;
    line-height: 1;
}

.std-el .elementor-widget.std-participant-logo {
    margin-bottom: 20px;
    text-align: center;
}

.std-el .std-participant-logo img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: 70px;
    object-fit: contain;
}

.std-el .std-card-title .elementor-heading-title {
    margin: 0;
    color: var(--navy-900);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.4;
}

/* ---------- Ceremony Details ---------- */

.std-el.std-ceremony {
    background: var(--surface);
}

.std-el .std-event-card {
    overflow: hidden;
    padding: 42px;
    border: 1px solid var(--gray-100);
    border-top: 4px solid var(--gold-500);
    border-radius: 20px;
    background: var(--white);
}

.std-el .std-event-card::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    border-radius: 0 0 0 100%;
    background: linear-gradient(135deg, transparent, rgba(0, 166, 166, 0.06));
    content: "";
    pointer-events: none;
}

.std-el .std-city .elementor-heading-title {
    margin-bottom: 18px;
    color: var(--teal-500);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1.7;
    text-transform: uppercase;
}

.std-el .std-event-date .elementor-heading-title {
    margin-bottom: 35px;
    color: var(--navy-900);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.std-el .std-detail {
    padding: 20px 0;
}

.std-el .std-detail:has(+ .std-detail) {
    border-bottom: 1px solid var(--gray-100);
}

.std-el .std-detail-icon .elementor-heading-title {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #edf8f8;
    font-size: 16px;
    line-height: 1;
}

.std-el .std-detail-text small {
    display: block;
    margin-bottom: 4px;
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.std-el .std-detail-text strong,
.std-el .std-detail-text p {
    display: block;
    margin: 0;
    color: var(--gray-900);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.std-el .std-map {
    margin-top: 16px;
}

.std-el .std-map .elementor-button {
    padding: 0;
    background: none;
    color: var(--teal-500);
    font-size: 14px;
    font-weight: 700;
}

.std-el .std-note {
    max-width: 850px;
    margin: 45px auto 0;
    padding: 20px 25px;
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    background: var(--white);
    color: var(--gray-500);
    font-size: 14px;
    text-align: center;
}

/* ---------- Your Graduation Experience ---------- */

.std-el.std-experience {
    background: var(--white);
}

.std-el .std-experience-grid {
    margin-top: 8px;
}

.std-el .std-exp-card {
    padding: 35px 25px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--surface);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.std-el .std-exp-card:hover {
    border-color: var(--gray-100);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.std-el .std-exp-icon .elementor-heading-title {
    margin-bottom: 22px;
    font-size: 2.3rem;
    line-height: 1.2;
}

.std-el .std-exp-card .std-card-title .elementor-heading-title {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.std-el .std-exp-text {
    color: var(--gray-500);
    font-size: 14px;
}

/* ---------- Coming soon, form and info box ---------- */

.std-el .std-soon {
    max-width: 950px;
    margin: 0 auto;
    padding: 48px;
    border: 1px dashed var(--gray-200);
    border-radius: 20px;
    background: var(--white);
    text-align: center;
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.std-el .std-soon-icon .elementor-heading-title {
    margin-bottom: 16px;
    font-size: 2.6rem;
    line-height: 1.2;
}

.std-el .std-soon .std-title .elementor-heading-title {
    margin: 0 auto 14px;
}

.std-el .std-soon .std-text {
    max-width: 680px;
    margin: 0 auto;
}

.std-el .std-soon .std-text p {
    margin: 0;
}

.std-el .std-kicker .elementor-heading-title {
    margin: 0 0 10px;
    color: var(--teal-500);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.7;
    text-transform: uppercase;
}

.std-el .std-form-title .elementor-heading-title {
    margin: 0 0 12px;
    color: var(--navy-900);
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
}

.std-el .std-form-intro {
    margin-bottom: 20px;
    color: var(--gray-500);
}

.std-el .std-policy {
    max-width: 950px;
    margin: 50px auto 0;
    padding: 32px;
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    background: var(--surface);
}

.std-el .std-policy-title .elementor-heading-title {
    margin: 0 0 12px;
    color: var(--navy-900);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
}

.std-el .std-policy-text {
    color: var(--gray-500);
}

/* ---------- Closing section ---------- */

.std-el.std-celebration {
    --padding-top: 130px;
    --padding-bottom: 130px;
    overflow: hidden;
    text-align: center;
    background-color: var(--navy-950);
    background-position: center center;
    background-size: cover;
}

.std-el.std-celebration::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(7, 21, 34, 0.9), rgba(7, 21, 34, 0.92));
    content: "";
    pointer-events: none;
}

.std-el.std-celebration > .e-con-inner {
    position: relative;
    z-index: 2;
    align-items: center;
    max-width: 900px;
}

.std-el .std-cap .elementor-heading-title {
    margin-bottom: 25px;
    font-size: 4rem;
    line-height: 1.2;
}

.std-el.std-celebration .std-eyebrow .elementor-heading-title {
    color: var(--gold-500);
}

.std-el .std-celebration-title .elementor-heading-title {
    margin: 0 0 28px;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.std-el .std-celebration-text {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
}

.std-el .std-signoff {
    margin-top: 28px;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .save-the-date-page .header-actions .button {
        display: none;
    }
}

@media (max-width: 820px) {
    .std-el.e-con {
        --content-width: min(calc(100% - 40px), var(--container));
        --padding-top: 90px;
        --padding-bottom: 90px;
    }

    .std-el .std-description {
        margin-top: 24px;
    }
}

@media (max-width: 700px) {
    .std-el.e-con {
        --content-width: calc(100% - 32px);
    }

    .std-el.std-hero {
        --padding-top: 140px;
        --padding-bottom: 80px;
        min-height: auto;
        background-position: 65% center;
    }

    .std-el .std-hero-title .elementor-heading-title {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

    .std-el .std-actions > .elementor-widget,
    .std-el .std-dates > .e-con {
        width: 100%;
    }

    .std-el .std-actions .elementor-button {
        width: 100%;
    }

    .std-el .std-highlight {
        padding: 35px 25px;
    }

    .std-el .std-event-card {
        padding: 30px 24px;
    }

    .std-el .std-soon {
        padding: 32px 22px;
    }

    .std-el.std-celebration {
        --padding-top: 90px;
        --padding-bottom: 90px;
    }
}

@media (max-width: 600px) {
    .std-el .std-title .elementor-heading-title {
        font-size: 42px;
    }
}