/* =========================================================
   MOTIVACIÓN SALSERA
   Events Page Styles
========================================================= */


/* =========================================================
   1. EVENTS PAGE
========================================================= */

.events-page {
    min-height: 100vh;
    background: var(--cream);
}


/* =========================================================
   2. EVENTS HERO
========================================================= */

.events-hero {
    position: relative;
    padding: 90px 20px 70px;
    background:
        linear-gradient(135deg,
            #fffaf5 0%,
            #fff7f0 50%,
            #f8e9df 100%);
    text-align: center;
    overflow: hidden;
}

.events-hero::before,
.events-hero::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(169, 0, 32, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.events-hero::before {
    width: 420px;
    height: 420px;
    top: -250px;
    left: -190px;
}

.events-hero::after {
    width: 360px;
    height: 360px;
    right: -190px;
    bottom: -240px;
}

.events-hero-content {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    margin: 0 auto;
}

.events-hero .eyebrow {
    margin-bottom: 15px;
}

.events-hero h1 {
    margin: 0 0 20px;
    color: var(--black);
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -2px;
}

.events-hero h1 .accent {
    color: var(--orange);
}

.events-hero p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* COMING SOON */

.events-coming-soon {
    display: inline-block;

    margin-top: 22px;
    padding: 9px 16px;

    border: 1px solid rgba(169, 0, 32, 0.15);
    border-radius: 999px;

    background: rgba(169, 0, 32, 0.04);

    color: var(--red) !important;

    font-size: 0.78rem !important;
    font-weight: 600;

    line-height: 1.4 !important;
}


/* =========================================================
   3. EVENTS SECTION
========================================================= */

.events-section {
    padding: 80px 20px 100px;
    background: var(--cream);
}

.events-container {
    width: min(1080px, 100%);
    margin: 0 auto;
}


/* =========================================================
   4. SECTION HEADING
========================================================= */

.events-heading {
    width: min(680px, 100%);
    margin: 0 auto 45px;
    text-align: center;
}

.events-heading .eyebrow {
    margin-bottom: 12px;
}

.events-heading h2 {
    margin-bottom: 15px;
    color: var(--black);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1;
    letter-spacing: -1px;
}

.events-heading h2 .accent {
    color: var(--red);
}

.events-heading p {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.7;
}


/* =========================================================
   5. EVENT CARD
========================================================= */

.event-card {
    display: grid;
    grid-template-columns: minmax(280px, 430px) 1fr;
    gap: 45px;
    align-items: center;

    padding: 25px;

    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   6. FLYER
========================================================= */

.flyer-container {
    position: relative;

    width: 100%;

    border-radius: var(--radius);
    overflow: hidden;

    background: #f4eee9;
}

.flyer {
    display: block;

    width: 100%;
    height: auto;

    max-height: 620px;

    object-fit: contain;

    cursor: zoom-in;

    transition: transform 0.5s ease;
}

.flyer-container:hover .flyer {
    transform: scale(1.015);
}


/* =========================================================
   7. EVENT CONTENT
========================================================= */

.event-content {
    padding: 15px 10px;
}

.event-content .eyebrow {
    margin-bottom: 12px;
}

.event-content h2 {
    margin-bottom: 18px;

    color: var(--black);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.05;
    letter-spacing: -1px;
}

.event-content h2 .accent {
    color: var(--red);
}

.event-description {
    max-width: 520px;

    margin-bottom: 25px;

    color: var(--muted);

    font-size: 0.88rem;

    line-height: 1.75;
}


/* =========================================================
   8. EVENT DETAILS
========================================================= */

.event-details {
    display: grid;

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

    gap: 10px;

    margin-bottom: 28px;
}

.event-detail {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    background: var(--cream);

    border: 1px solid var(--border);

    border-radius: 10px;
}

.event-detail-icon {
    flex-shrink: 0;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff0e6;

    color: var(--red);

    font-size: 0.85rem;
}

.event-detail strong {
    display: block;

    color: var(--text);

    font-size: 0.68rem;

    line-height: 1.3;
}

.event-detail small {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 0.62rem;
}


/* =========================================================
   9. EVENT BUTTON
========================================================= */

.event-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding: 0 22px;

    border-radius: 25px;

    background: var(--red);

    color: white;

    font-size: 0.75rem;

    font-weight: 700;

    box-shadow: 0 8px 20px rgba(169, 0, 32, 0.15);

    transition: var(--transition);
}

.event-button:hover {
    background: var(--red-dark);

    color: white;

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(169, 0, 32, 0.22);
}

.event-button span {
    font-size: 0.95rem;

    transition: transform 0.25s ease;
}

.event-button:hover span {
    transform: translateX(3px);
}


/* =========================================================
   10. NO EVENTS STATE
========================================================= */

.no-events {
    max-width: 650px;

    margin: 0 auto;

    padding: 50px 30px;

    text-align: center;

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.no-events h2 {
    margin-bottom: 12px;

    color: var(--black);

    font-size: 1.8rem;
}

.no-events p {
    color: var(--muted);

    font-size: 0.85rem;

    line-height: 1.7;
}


/* =========================================================
   11. FLYER MODAL
========================================================= */

.flyer-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(20, 10, 8, 0.88);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.flyer-modal.is-open {
    opacity: 1;

    visibility: visible;
}

.modal-content {
    display: block;

    max-width: min(900px, 95vw);
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.close-modal {
    position: absolute;

    top: 20px;
    right: 25px;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: white;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.2);

    transform: rotate(90deg);
}

/* =========================================================
   VIDEO
========================================================= */

.event-video {
    width: 100%;
    height: 500px;
    display: block;
    border-radius: 12px;
}


/* =========================================================
   12. EVENTS CTA
========================================================= */

.events-cta {
    position: relative;

    padding: 85px 20px;

    background:
        linear-gradient(135deg,
            var(--red-dark),
            var(--red));

    color: white;

    text-align: center;

    overflow: hidden;
}

.events-cta::before,
.events-cta::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.events-cta::before {
    width: 420px;
    height: 420px;

    top: -250px;
    left: -200px;
}

.events-cta::after {
    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -240px;
}

.events-cta-content {
    position: relative;

    z-index: 2;

    width: min(650px, 100%);

    margin: 0 auto;
}

.events-cta .eyebrow {
    color: rgba(255, 255, 255, 0.72);

    margin-bottom: 13px;
}

.events-cta h2 {
    margin-bottom: 18px;

    color: white;

    font-size: clamp(2.4rem, 5vw, 4rem);

    line-height: 1;
}

.events-cta h2 .accent {
    color: var(--orange-light);
}

.events-cta p {
    max-width: 520px;

    margin: 0 auto 28px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.86rem;

    line-height: 1.7;
}

.events-cta .btn {
    background: white;

    color: var(--red);
}

.events-cta .btn:hover {
    background: var(--orange-light);

    color: white;
}


/* =========================================================
   13. RESPONSIVE
========================================================= */

@media (max-width: 850px) {

    .events-hero {
        padding: 70px 20px 60px;
    }

    .events-section {
        padding: 65px 20px 80px;
    }

    .event-card {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 20px;
    }

    .flyer {
        max-height: 700px;
    }

    .event-content {
        padding: 5px;
    }

    .events-cta {
        padding: 70px 20px;
    }
}


@media (max-width: 600px) {

    .events-hero {
        padding: 60px 18px 50px;
    }

    .events-hero h1 {
        font-size: clamp(2.5rem, 12vw, 3.5rem);

        letter-spacing: -1.5px;
    }

    .events-hero p:not(.eyebrow) {
        max-width: 620px;
        margin: 0 auto;
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.75;
    }





    .events-section {
        padding: 55px 18px 70px;
    }

    .events-heading {
        margin-bottom: 30px;
    }

    .events-heading h2 {
        font-size: 2.3rem;
    }

    .event-card {
        gap: 25px;

        padding: 15px;

        border-radius: 18px;
    }

    .flyer-container {
        border-radius: 14px;
    }

    .event-content h2 {
        font-size: 2.15rem;
    }

    .event-description {
        font-size: 0.82rem;
    }

    .event-details {
        grid-template-columns: 1fr;
    }

    .event-button {
        width: 100%;
    }

    .flyer-modal {
        padding: 15px;
    }

    .modal-content {
        max-width: 94vw;
        max-height: 85vh;
    }

    .close-modal {
        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;

        font-size: 1.7rem;
    }

    .events-cta {
        padding: 65px 18px;
    }

    .events-cta h2 {
        font-size: 2.5rem;
    }
}


/* =========================================================
   14. ACCESSIBILITY
========================================================= */

.flyer:focus-visible,
.event-button:focus-visible,
.close-modal:focus-visible {
    outline: 3px solid var(--orange);

    outline-offset: 4px;
}


body.modal-open {
    overflow: hidden;
}

You said: this is my exaple of the format I need <div class="event-content"><p class="eyebrow" data-de="SALSA-NACHT Am 3. Oktober ist es wieder soweit!"
data-es="NOCHE DE SALSA El 3 de Octubre estamos de vuelta">SALSA-NACHT Am 3. Oktober ist es wieder soweit ! </p><h3 data-de="Noche de Salsa Colombiana" data-es="Noche de Salsa Colombiana">Noche de Salsa Colombiana </h3><p class="event-description"
data-de="Erlebe am 3. Oktober einen besonderen Abend voller Musik, Tanz, Freude und kolumbianischem Flair. Dich erwarten kolumbianische Salsa, Animation, ein Workshop, gute Musik und vieles mehr. Von 17:00 bis 19:00 Uhr gibt es leckeres Essen und kolumbianische Spezialitäten."
data-es="Vive el 3 de octubre una noche especial llena de música, baile, alegría y ambiente colombiano. Disfruta de salsa colombiana, animación, un workshop, buena música y mucho más. De 17:00 a 19:00 habrá deliciosa comida y especialidades colombianas.">Erlebe am 3. Oktober einen besonderen Abend voller Musik,
Tanz,
Freude und kolumbianischem Flair. Dich erwarten kolumbianische Salsa,
Animation,
ein Workshop,
gute Musik und vieles mehr. Von 17:00 bis 19:00 Uhr gibt es leckeres Essen und kolumbianische Spezialitäten. </p><p class="event-description"
data-de="Ab 19:00 Uhr: Kolumbianische Salsa, Animation, Workshop und gute Musik. Eintritt frei!"
data-es="A partir de las 19:00: Salsa colombiana, animación, workshop y buena música. ¡Entrada gratuita!">Ab 19:00 Uhr: Kolumbianische Salsa,
Animation,
Workshop und gute Musik. Eintritt frei ! </p><p class="event-description"
data-de="Komm mit deinen Freunden, deiner Familie oder einfach mit viel Lust zum Tanzen! ❤️"
data-es="¡Ven con tus amigos, tu familia o simplemente con muchas ganas de bailar! ❤️">Komm mit deinen Freunden,
deiner Familie oder einfach mit viel Lust zum Tanzen ! ❤️ </p><a href="https://wa.me/41798944151" target="_blank" rel="noopener noreferrer"
class="btn btn-primary" data-de="Mehr erfahren" data-es="Más información">Mehr erfahren <span>→</span></a></div>this is the information I need that format with 🔥 ZUM ERSTEN MAL IN BERN ! 🇨🇭🇨🇴 🌟 JUAN RACINES – KOLUMBIANISCHER TÄNZER 🌟 Ein einzigartiges Erlebnis für alle Liebhaber des Salsa Caleña ! Juan Racines ist aktueller Gewinner von zwei bedeutenden Salsa-Kongressen in Europa: La Negra und Euroson. Damit repräsentiert er das kolumbianische Talent und die Leidenschaft für Salsa auf den europäischen Bühnen. 💃🕺 Jetzt kommt er zum ersten Mal nach Bern,
in die Tanzschule Motivación Salsera,
um sein Können,
seine Technik und seine Leidenschaft mit euch zu teilen ! Freut euch auf 3 Stunden voller exklusiver Workshops,
bei denen ihr eure Tanztechnik verbessern und die Essenz des kolumbianischen Salsa kennenlernen könnt. 📅 Sonntag,
8. November 2026 🔥 WORKSHOP-PROGRAMM 🕜 13:30 – 14:30 Uhr | Body Movement 🕝 14:45 – 15:45 Uhr | Caleño Fusión 🕓 16:00 – 17:00 Uhr | Schritte und Paarführung 🎟️ WORKSHOP-PREISE • 1 Workshop: 40 CHF • 2 Workshops: 70 CHF • 3 Workshops: 90 CHF ✨ Lerne von einem herausragenden kolumbianischen Künstler,
entdecke neue Bewegungen und entwickle ChatGPT said: Here is your information formatted to match your example,
with German and Spanish translations using data-de and data-es. Writing <div class="event-content"><p class="eyebrow"
data-de="🔥 ZUM ERSTEN MAL IN BERN! 🇨🇭🇨🇴"
data-es="🔥 ¡POR PRIMERA VEZ EN BERNA! 🇨🇭🇨🇴">🔥 ZUM ERSTEN MAL IN BERN ! 🇨🇭🇨🇴 </p><h3 data-de="Juan Racines – Kolumbianischer Tänzer"
data-es="Juan Racines – Bailarín colombiano">Juan Racines – Kolumbianischer Tänzer </h3><p class="event-description"
data-de="Ein einzigartiges Erlebnis für alle Liebhaber des Salsa Caleña! Juan Racines ist aktueller Gewinner zweier bedeutender Salsa-Kongresse in Europa: La Negra und Euroson. Damit repräsentiert er das kolumbianische Talent und die Leidenschaft für Salsa auf den europäischen Bühnen."
data-es="¡Una experiencia única para todos los amantes de la salsa caleña! Juan Racines es el actual ganador de dos importantes congresos de salsa en Europa: La Negra y Euroson. Con su talento, representa la pasión y el talento colombiano en los escenarios europeos.">Ein einzigartiges Erlebnis für alle Liebhaber des Salsa Caleña ! Juan Racines ist aktueller Gewinner zweier bedeutender Salsa-Kongresse in Europa: La Negra und Euroson. Damit repräsentiert er das kolumbianische Talent und die Leidenschaft für Salsa auf den europäischen Bühnen. </p><p class="event-description"
data-de="💃🕺 Jetzt kommt er zum ersten Mal nach Bern, in die Tanzschule Motivación Salsera, um sein Können, seine Technik und seine Leidenschaft mit euch zu teilen!"
data-es="💃🕺 ¡Ahora llega por primera vez a Berna, a la escuela de baile Motivación Salsera, para compartir con vosotros su talento, técnica y pasión!">💃🕺 Jetzt kommt er zum ersten Mal nach Bern,
in die Tanzschule Motivación Salsera,
um sein Können,
seine Technik und seine Leidenschaft mit euch zu teilen ! </p><p class="event-description"
data-de="Freut euch auf 3 Stunden voller exklusiver Workshops, bei denen ihr eure Tanztechnik verbessern und die Essenz des kolumbianischen Salsa kennenlernen könnt."
data-es="Disfruta de 3 horas de talleres exclusivos en los que podrás mejorar tu técnica de baile y descubrir la esencia de la salsa colombiana.">Freut euch auf 3 Stunden voller exklusiver Workshops,
bei denen ihr eure Tanztechnik verbessern und die Essenz des kolumbianischen Salsa kennenlernen könnt. </p><p class="event-description"
data-de="📅 Sonntag, 8. November 2026"
data-es="📅 Domingo, 8 de noviembre de 2026">📅 Sonntag,
8. November 2026 </p><p class="event-description"
data-de="🔥 WORKSHOP-PROGRAMM"
data-es="🔥 PROGRAMA DE TALLERES">🔥 WORKSHOP-PROGRAMM </p><p class="event-description"
data-de="🕜 13:30 – 14:30 Uhr | Body Movement"
data-es="🕜 13:30 – 14:30 | Movimiento corporal (Body Movement)">🕜 13:30 – 14:30 Uhr | Body Movement </p><p class="event-description"
data-de="🕝 14:45 – 15:45 Uhr | Caleño Fusión"
data-es="🕝 14:45 – 15:45 | Fusión caleña">🕝 14:45 – 15:45 Uhr | Caleño Fusión </p><p class="event-description"
data-de="🕓 16:00 – 17:00 Uhr | Schritte und Paarführung"
data-es="🕓 16:00 – 17:00 | Pasos y conducción en pareja">🕓 16:00 – 17:00 Uhr | Schritte und Paarführung </p><p class="event-description"
data-de="🎟️ WORKSHOP-PREISE"
data-es="🎟️ PRECIOS DE LOS TALLERES">🎟️ WORKSHOP-PREISE </p><p class="event-description"
data-de="1 Workshop: 40 CHF"
data-es="1 taller: 40 CHF">• 1 Workshop: 40 CHF </p><p class="event-description"
data-de="2 Workshops: 70 CHF"
data-es="2 talleres: 70 CHF">• 2 Workshops: 70 CHF </p><p class="event-description"
data-de="3 Workshops: 90 CHF"
data-es="3 talleres: 90 CHF">• 3 Workshops: 90 CHF </p><p class="event-description"
data-de="✨ Lerne von einem herausragenden kolumbianischen Künstler, entdecke neue Bewegungen und entwickle deine Tanzfähigkeiten weiter!"
data-es="✨ Aprende de un destacado artista colombiano, descubre nuevos movimientos y sigue desarrollando tus habilidades de baile.">✨ Lerne von einem herausragenden kolumbianischen Künstler,
entdecke neue Bewegungen und entwickle deine Tanzfähigkeiten weiter ! </p><a href="#"
class="btn btn-primary"
data-de="Jetzt anmelden"
data-es="Inscríbete ahora">Jetzt anmelden <span>→</span></a></div>Copied Note: I used href="#" as a placeholder for registration because you haven't provided a booking link yet. Replace it with the actual registration URL. The final sentence was completed naturally because your original text ended at “entwickle”.
 You said: <section class="events-section"><div class="events-container"><div class="events-heading"><p class="eyebrow" data-de="AKTUELLE VERANSTALTUNGEN" data-es="PRÓXIMOS EVENTOS">AKTUELLE VERANSTALTUNGEN </p><h2><span data-de="Komm" data-es="Ven a">Komm </span><span class="accent" data-de="tanzen." data-es="bailar.">tanzen. </span></h2><p data-de="Entdecke unsere aktuellen Workshops und Events."
data-es="Descubre nuestros próximos talleres y eventos.">Entdecke unsere aktuellen Workshops und Events. </p></div><article class="event-card">< !-- Flyer --><div class="flyer-container"><button type="button" class="flyer-button" id="flyerImage" aria-label="Flyer vergrößern"><img class="flyer" src="assets/eventoOctubre.jpg" alt="Salsa Caleña Workshop Flyer"></button></div><div class="event-content"><p class="eyebrow" data-de="🔥 ZUM ERSTEN MAL IN BERN! 🇨🇭🇨🇴"
data-es="🔥 ¡POR PRIMERA VEZ EN BERNA! 🇨🇭🇨🇴">🔥 ZUM ERSTEN MAL IN BERN ! 🇨🇭🇨🇴 </p><h3 data-de="Juan Racines – Kolumbianischer Tänzer"
data-es="Juan Racines – Bailarín colombiano">Juan Racines – Kolumbianischer Tänzer </h3><p class="event-description"
data-de="Ein einzigartiges Erlebnis für alle Liebhaber des Salsa Caleña! Juan Racines ist aktueller Gewinner zweier bedeutender Salsa-Kongresse in Europa: La Negra und Euroson. Damit repräsentiert er das kolumbianische Talent und die Leidenschaft für Salsa auf den europäischen Bühnen."
data-es="¡Una experiencia única para todos los amantes de la salsa caleña! Juan Racines es el actual ganador de dos importantes congresos de salsa en Europa: La Negra y Euroson. Con su talento, representa la pasión y el talento colombiano en los escenarios europeos.">Ein einzigartiges Erlebnis für alle Liebhaber des Salsa Caleña ! Juan Racines ist aktueller Gewinner zweier bedeutender Salsa-Kongresse in Europa: La Negra und Euroson. Damit repräsentiert er das kolumbianische Talent und die Leidenschaft für Salsa auf den europäischen Bühnen. </p><p class="event-description"
data-de="💃🕺 Jetzt kommt er zum ersten Mal nach Bern, in die Tanzschule Motivación Salsera, um sein Können, seine Technik und seine Leidenschaft mit euch zu teilen!"
data-es="💃🕺 ¡Ahora llega por primera vez a Berna, a la escuela de baile Motivación Salsera, para compartir con vosotros su talento, técnica y pasión!">💃🕺 Jetzt kommt er zum ersten Mal nach Bern,
in die Tanzschule Motivación Salsera,
um sein Können,
seine Technik und seine Leidenschaft mit euch zu teilen ! </p><p class="event-description"
data-de="Freut euch auf 3 Stunden voller exklusiver Workshops, bei denen ihr eure Tanztechnik verbessern und die Essenz des kolumbianischen Salsa kennenlernen könnt."
data-es="Disfruta de 3 horas de talleres exclusivos en los que podrás mejorar tu técnica de baile y descubrir la esencia de la salsa colombiana.">Freut euch auf 3 Stunden voller exklusiver Workshops,
bei denen ihr eure Tanztechnik verbessern und die Essenz des kolumbianischen Salsa kennenlernen könnt. </p><p class="event-description" data-de="📅 Sonntag, 8. November 2026"
data-es="📅 Domingo, 8 de noviembre de 2026">📅 Sonntag,
8. November 2026 </p><p class="event-description" data-de="🔥 WORKSHOP-PROGRAMM" data-es="🔥 PROGRAMA DE TALLERES">🔥 WORKSHOP-PROGRAMM </p><p class="event-description" data-de="🕜 13:30 – 14:30 Uhr | Body Movement"
data-es="🕜 13:30 – 14:30 | Movimiento corporal (Body Movement)">🕜 13:30 – 14:30 Uhr | Body Movement </p><p class="event-description" data-de="🕝 14:45 – 15:45 Uhr | Caleño Fusión"
data-es="🕝 14:45 – 15:45 | Fusión caleña">🕝 14:45 – 15:45 Uhr | Caleño Fusión </p><p class="event-description" data-de="🕓 16:00 – 17:00 Uhr | Schritte und Paarführung"
data-es="🕓 16:00 – 17:00 | Pasos y conducción en pareja">🕓 16:00 – 17:00 Uhr | Schritte und Paarführung </p><p class="event-description" data-de="🎟️ WORKSHOP-PREISE"
data-es="🎟️ PRECIOS DE LOS TALLERES">🎟️ WORKSHOP-PREISE </p><p class="event-description" data-de="1 Workshop: 40 CHF" data-es="1 taller: 40 CHF">• 1 Workshop: 40 CHF </p><p class="event-description" data-de="2 Workshops: 70 CHF" data-es="2 talleres: 70 CHF">• 2 Workshops: 70 CHF </p><p class="event-description" data-de="3 Workshops: 90 CHF" data-es="3 talleres: 90 CHF">• 3 Workshops: 90 CHF </p><p class="event-description"
data-de="✨ Lerne von einem herausragenden kolumbianischen Künstler, entdecke neue Bewegungen und entwickle deine Tanzfähigkeiten weiter!"
data-es="✨ Aprende de un destacado artista colombiano, descubre nuevos movimientos y sigue desarrollando tus habilidades de baile.">✨ Lerne von einem herausragenden kolumbianischen Künstler,
entdecke neue Bewegungen und entwickle deine Tanzfähigkeiten weiter ! </p><a href="https://wa.me/41798944151" class="btn btn-primary" data-de="Jetzt anmelden"
data-es="Inscríbete ahora">Jetzt anmelden <span>→</span></a></div></article></div></section>this is the complet section how would you style the text that we just add? this is my stlyes sheet
/* =========================================================
       MOTIVACIÓN SALSERA
       Events Page Styles
    ========================================================= */


/* =========================================================
       1. EVENTS PAGE
    ========================================================= */

.events-page {
    min-height: 100vh;
    background: var(--cream);
}


/* =========================================================
       2. EVENTS HERO
    ========================================================= */

.events-hero {
    position: relative;
    padding: 90px 20px 70px;
    background:
        linear-gradient(135deg,
            #fffaf5 0%,
            #fff7f0 50%,
            #f8e9df 100%);
    text-align: center;
    overflow: hidden;
}

.events-hero::before,
.events-hero::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(169, 0, 32, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.events-hero::before {
    width: 420px;
    height: 420px;
    top: -250px;
    left: -190px;
}

.events-hero::after {
    width: 360px;
    height: 360px;
    right: -190px;
    bottom: -240px;
}

.events-hero-content {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    margin: 0 auto;
}

.events-hero .eyebrow {
    margin-bottom: 15px;
}

.events-hero h1 {
    margin: 0 0 20px;
    color: var(--black);
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -2px;
}

.events-hero h1 .accent {
    color: var(--orange);
}

.events-hero p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* COMING SOON */

.events-coming-soon {
    display: inline-block;

    margin-top: 22px;
    padding: 9px 16px;

    border: 1px solid rgba(169, 0, 32, 0.15);
    border-radius: 999px;

    background: rgba(169, 0, 32, 0.04);

    color: var(--red) !important;

    font-size: 0.78rem !important;
    font-weight: 600;

    line-height: 1.4 !important;
}


/* =========================================================
       3. EVENTS SECTION
    ========================================================= */

.events-section {
    padding: 80px 20px 100px;
    background: var(--cream);
}

.events-container {
    width: min(1080px, 100%);
    margin: 0 auto;
}


/* =========================================================
       4. SECTION HEADING
    ========================================================= */

.events-heading {
    width: min(680px, 100%);
    margin: 0 auto 45px;
    text-align: center;
}

.events-heading .eyebrow {
    margin-bottom: 12px;
}

.events-heading h2 {
    margin-bottom: 15px;
    color: var(--black);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1;
    letter-spacing: -1px;
}

.events-heading h2 .accent {
    color: var(--red);
}

.events-heading p {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.7;
}


/* =========================================================
       5. EVENT CARD
    ========================================================= */

.event-card {
    display: grid;
    grid-template-columns: minmax(280px, 430px) 1fr;
    gap: 45px;
    align-items: center;

    padding: 25px;

    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}


/* =========================================================
       6. FLYER
    ========================================================= */

.flyer-container {
    position: relative;

    width: 100%;

    border-radius: var(--radius);
    overflow: hidden;

    background: #f4eee9;
}

.flyer {
    display: block;

    width: 100%;
    height: auto;

    max-height: 620px;

    object-fit: contain;

    cursor: zoom-in;

    transition: transform 0.5s ease;
}

.flyer-container:hover .flyer {
    transform: scale(1.015);
}


/* =========================================================
       7. EVENT CONTENT
    ========================================================= */

.event-content {
    padding: 15px 10px;
}

.event-content .eyebrow {
    margin-bottom: 12px;
}

.event-content h2 {
    margin-bottom: 18px;

    color: var(--black);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.05;
    letter-spacing: -1px;
}

.event-content h2 .accent {
    color: var(--red);
}

.event-description {
    max-width: 520px;

    margin-bottom: 25px;

    color: var(--muted);

    font-size: 0.88rem;

    line-height: 1.75;
}


/* =========================================================
       8. EVENT DETAILS
    ========================================================= */

.event-details {
    display: grid;

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

    gap: 10px;

    margin-bottom: 28px;
}

.event-detail {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    background: var(--cream);

    border: 1px solid var(--border);

    border-radius: 10px;
}

.event-detail-icon {
    flex-shrink: 0;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff0e6;

    color: var(--red);

    font-size: 0.85rem;
}

.event-detail strong {
    display: block;

    color: var(--text);

    font-size: 0.68rem;

    line-height: 1.3;
}

.event-detail small {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 0.62rem;
}


/* =========================================================
       9. EVENT BUTTON
    ========================================================= */

.event-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding: 0 22px;

    border-radius: 25px;

    background: var(--red);

    color: white;

    font-size: 0.75rem;

    font-weight: 700;

    box-shadow: 0 8px 20px rgba(169, 0, 32, 0.15);

    transition: var(--transition);
}

.event-button:hover {
    background: var(--red-dark);

    color: white;

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(169, 0, 32, 0.22);
}

.event-button span {
    font-size: 0.95rem;

    transition: transform 0.25s ease;
}

.event-button:hover span {
    transform: translateX(3px);
}


/* =========================================================
       10. NO EVENTS STATE
    ========================================================= */

.no-events {
    max-width: 650px;

    margin: 0 auto;

    padding: 50px 30px;

    text-align: center;

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.no-events h2 {
    margin-bottom: 12px;

    color: var(--black);

    font-size: 1.8rem;
}

.no-events p {
    color: var(--muted);

    font-size: 0.85rem;

    line-height: 1.7;
}


/* =========================================================
       11. FLYER MODAL
    ========================================================= */

.flyer-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(20, 10, 8, 0.88);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.flyer-modal.is-open {
    opacity: 1;

    visibility: visible;
}

.modal-content {
    display: block;

    max-width: min(900px, 95vw);
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.close-modal {
    position: absolute;

    top: 20px;
    right: 25px;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: white;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.2);

    transform: rotate(90deg);
}

/* =========================================================
       VIDEO
    ========================================================= */

.event-video {
    width: 100%;
    height: 500px;
    display: block;
    border-radius: 12px;
}


/* =========================================================
       12. EVENTS CTA
    ========================================================= */

.events-cta {
    position: relative;

    padding: 85px 20px;

    background:
        linear-gradient(135deg,
            var(--red-dark),
            var(--red));

    color: white;

    text-align: center;

    overflow: hidden;
}

.events-cta::before,
.events-cta::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.events-cta::before {
    width: 420px;
    height: 420px;

    top: -250px;
    left: -200px;
}

.events-cta::after {
    width: 360px;
    height: 360px;

    right: -190px;
    bottom: -240px;
}

.events-cta-content {
    position: relative;

    z-index: 2;

    width: min(650px, 100%);

    margin: 0 auto;
}

.events-cta .eyebrow {
    color: rgba(255, 255, 255, 0.72);

    margin-bottom: 13px;
}

.events-cta h2 {
    margin-bottom: 18px;

    color: white;

    font-size: clamp(2.4rem, 5vw, 4rem);

    line-height: 1;
}

.events-cta h2 .accent {
    color: var(--orange-light);
}

.events-cta p {
    max-width: 520px;

    margin: 0 auto 28px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.86rem;

    line-height: 1.7;
}

.events-cta .btn {
    background: white;

    color: var(--red);
}

.events-cta .btn:hover {
    background: var(--orange-light);

    color: white;
}


/* =========================================================
       13. RESPONSIVE
    ========================================================= */

@media (max-width: 850px) {

    .events-hero {
        padding: 70px 20px 60px;
    }

    .events-section {
        padding: 65px 20px 80px;
    }

    .event-card {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 20px;
    }

    .flyer {
        max-height: 700px;
    }

    .event-content {
        padding: 5px;
    }

    .events-cta {
        padding: 70px 20px;
    }
}


@media (max-width: 600px) {

    .events-hero {
        padding: 60px 18px 50px;
    }

    .events-hero h1 {
        font-size: clamp(2.5rem, 12vw, 3.5rem);

        letter-spacing: -1.5px;
    }

    .events-hero p:not(.eyebrow) {
        max-width: 620px;
        margin: 0 auto;
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.75;
    }





    .events-section {
        padding: 55px 18px 70px;
    }

    .events-heading {
        margin-bottom: 30px;
    }

    .events-heading h2 {
        font-size: 2.3rem;
    }

    .event-card {
        gap: 25px;

        padding: 15px;

        border-radius: 18px;
    }

    .flyer-container {
        border-radius: 14px;
    }

    .event-content h2 {
        font-size: 2.15rem;
    }

    .event-description {
        font-size: 0.82rem;
    }

    .event-details {
        grid-template-columns: 1fr;
    }

    .event-button {
        width: 100%;
    }

    .flyer-modal {
        padding: 15px;
    }

    .modal-content {
        max-width: 94vw;
        max-height: 85vh;
    }

    .close-modal {
        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;

        font-size: 1.7rem;
    }

    .events-cta {
        padding: 65px 18px;
    }

    .events-cta h2 {
        font-size: 2.5rem;
    }
}


/* =========================================================
       14. ACCESSIBILITY
    ========================================================= */

.flyer:focus-visible,
.event-button:focus-visible,
.close-modal:focus-visible {
    outline: 3px solid var(--orange);

    outline-offset: 4px;
}


body.modal-open {
    overflow: hidden;
}

/* =========================================================
       15. JUAN RACINES WORKSHOP DETAILS
    ========================================================= */

/* Workshop schedule */

.workshop-schedule {
    margin: 10px 0;
    padding: 5px;
    background: #fffaf5;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.event-content .workshop-heading {
    margin: 0 0 6px;
    color: var(--red);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.workshop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.workshop-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.workshop-time {
    flex: 0 0 115px;
    color: var(--red);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.workshop-name {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Workshop pricing */

.workshop-pricing {
    margin: 6px 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pricing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 17px 8px;
    background: #fffaf5;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.pricing-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.pricing-item span {
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.pricing-item strong {
    color: var(--black);
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.2;
    white-space: nowrap;
}