/* ==========================================
   EuroShop 2026 Banners
   Imports shared base from styles.css
   ========================================== */

/* Inline brand "y" — shifted up to read as uppercase */
.brand-y {
    display: inline-block;
    font-weight: 800;
    transform: translateY(-0.12em);
    font-size: 1.15em;
}

/* EuroShop logo handling */
.es-logo {
    height: 40px;
    object-fit: contain;
}

.es-logo-white {
    filter: brightness(0) invert(1);
}

.es-logo-dark {
    /* original red+black — for light backgrounds */
}

/* Event info shared styles */
.es-date {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    color: var(--light);
    letter-spacing: 0.02em;
}

.es-location {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    color: var(--light);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.4;
}

.es-stand {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: 0.1em;
}

/* ==========================================
   ES-BANNER 1 — Hero Announce (1080×1080)
   "Meet us at EuroShop"
   ========================================== */
.es-banner-1 {
    background: radial-gradient(ellipse 80% 60% at 50% 55%, rgba(74,158,255,0.06) 0%, var(--dark) 70%);
    display: flex;
    flex-direction: column;
}

.es-banner-1 .top-bar {
    padding: 36px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(238,240,244,0.06);
}

.es-banner-1 .logos {
    display: flex;
    align-items: center;
    gap: 24px;
}

.es-banner-1 .logos .sep {
    width: 1px;
    height: 28px;
    background: rgba(238,240,244,0.12);
}

.es-banner-1 .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.es-banner-1 .big-y {
    font-size: 360px;
    position: relative;
}

.es-banner-1 .headline {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 600;
    font-size: 42px;
    color: var(--light);
    opacity: 0.8;
    margin-top: 16px;
    letter-spacing: -0.01em;
}

.es-banner-1 .headline em {
    color: #e03e3e;
    font-style: normal;
    font-weight: 700;
    opacity: 1;
}

.es-banner-1 .es-date {
    font-size: 28px;
    margin-top: 20px;
}

.es-banner-1 .es-stand {
    font-size: 16px;
    margin-top: 10px;
}

.es-banner-1 .bottom-bar {
    background: var(--blue);
    padding: 26px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.es-banner-1 .cta {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.es-banner-1 .bottom-bar .es-location {
    color: var(--dark);
    opacity: 0.6;
    font-size: 14px;
}

/* ==========================================
   ES-BANNER 2 — Grid Split (1080×1080)
   ========================================== */
.es-banner-2 {
    background: var(--dark);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.es-banner-2 .cell {
    border: 0.5px solid rgba(238,240,244,0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.es-banner-2 .cell-blue {
    background: var(--blue);
}

.es-banner-2 .cell-blue .big-y {
    font-size: 380px;
    color: var(--dark);
}

.es-banner-2 .cell-event {
    background: radial-gradient(circle at 50% 50%, rgba(74,158,255,0.08) 0%, transparent 70%);
}

.es-banner-2 .cell-event .es-logo {
    height: 48px;
    margin-bottom: 16px;
}

.es-banner-2 .cell-event .es-date {
    font-size: 22px;
    margin-top: 12px;
}

.es-banner-2 .cell-stand {
    text-align: center;
}

.es-banner-2 .cell-stand .hall {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 800;
    font-size: 56px;
    color: var(--light);
    line-height: 1;
}

.es-banner-2 .cell-stand .hall-detail {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    color: var(--blue);
    letter-spacing: 0.15em;
    margin-top: 8px;
}

.es-banner-2 .cell-light {
    background: var(--light);
}

.es-banner-2 .cell-cta {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: var(--dark);
    text-align: center;
    letter-spacing: -0.01em;
}

.es-banner-2 .cell-cta span {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 14px;
    opacity: 0.5;
    letter-spacing: 0.15em;
    margin-top: 8px;
}

/* ==========================================
   ES-BANNER 3 — OG Image (1200×630)
   ========================================== */
.es-banner-3 {
    background: var(--dark);
    display: grid;
    grid-template-columns: 1fr 380px;
}

.es-banner-3 .left {
    padding: 56px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.es-banner-3 .logo-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.es-banner-3 .logo-row .pygmalios-logo {
    height: 11px;
    opacity: 0.4;
}

.es-banner-3 .logo-row .sep {
    width: 1px;
    height: 20px;
    background: rgba(238,240,244,0.12);
}

.es-banner-3 .logo-row .es-logo {
    height: 28px;
}

.es-banner-3 .headline {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.es-banner-3 .headline .big-y {
    font-size: 160px;
}

.es-banner-3 .headline .text {
    display: flex;
    flex-direction: column;
}

.es-banner-3 .headline .text .line1 {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 600;
    font-size: 34px;
    color: var(--light);
    opacity: 0.7;
}

.es-banner-3 .headline .text .line1 em {
    color: #e03e3e;
    font-style: normal;
    font-weight: 700;
    opacity: 1;
}

.es-banner-3 .headline .text .line2 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    color: var(--blue);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 6px;
}

.es-banner-3 .right {
    background: linear-gradient(180deg, rgba(74,158,255,0.08) 0%, rgba(74,158,255,0.03) 100%);
    border-left: 1px solid rgba(74,158,255,0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
    gap: 16px;
}

.es-banner-3 .right .es-date {
    font-size: 32px;
}

.es-banner-3 .right .es-stand {
    font-size: 15px;
}

.es-banner-3 .right .es-location {
    font-size: 12px;
}

/* ==========================================
   ES-BANNER 4 — Story (1080×1920)
   ========================================== */
.es-banner-4 {
    background: var(--dark);
    display: flex;
    flex-direction: column;
}

.es-banner-4 .top {
    padding: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(238,240,244,0.06);
}

.es-banner-4 .y-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.es-banner-4 .y-section .big-y {
    font-size: 480px;
}

.es-banner-4 .y-section .es-logo {
    height: 56px;
}

.es-banner-4 .msg-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 80px;
    background: linear-gradient(0deg, rgba(74,158,255,0.06) 0%, transparent 100%);
    gap: 12px;
}

.es-banner-4 .msg-section .headline {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 700;
    font-size: 52px;
    color: var(--light);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.es-banner-4 .msg-section .headline em {
    color: #e03e3e;
    font-style: normal;
}

.es-banner-4 .msg-section .es-date {
    font-size: 28px;
    margin-top: 8px;
}

.es-banner-4 .msg-section .es-stand {
    font-size: 16px;
}

.es-banner-4 .bottom {
    background: var(--blue);
    padding: 36px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.es-banner-4 .bottom .cta {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--dark);
    text-transform: uppercase;
}

.es-banner-4 .bottom img {
    height: 11px;
    filter: brightness(0);
    opacity: 0.35;
}

/* ==========================================
   ES-BANNER 5 — Inverted / Light (1080×1080)
   "See you in Düsseldorf"
   ========================================== */
.es-banner-5 {
    background: var(--light);
    display: flex;
    flex-direction: column;
}

.es-banner-5::before {
    background-image: none;
}

.es-banner-5 .top-bar {
    background: var(--dark);
    padding: 30px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.es-banner-5 .top-bar .pygmalios-logo {
    height: 11px;
    opacity: 0.4;
}

.es-banner-5 .top-bar .pill {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--blue);
    text-transform: uppercase;
}

.es-banner-5 .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px;
}

.es-banner-5 .main .big-y {
    font-size: 300px;
    color: var(--dark);
    text-shadow: 0 0 120px rgba(74,158,255,0.15);
}

.es-banner-5 .main .headline {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 600;
    font-size: 38px;
    color: var(--dark);
    opacity: 0.6;
    margin-top: 12px;
    letter-spacing: -0.01em;
}

.es-banner-5 .main .headline em {
    font-style: normal;
    opacity: 1;
    color: #c0392b;
}

.es-banner-5 .main .es-logo {
    height: 52px;
    margin-top: 32px;
}

.es-banner-5 .main .event-info {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.es-banner-5 .main .event-info .es-date {
    font-size: 28px;
    color: var(--dark);
}

.es-banner-5 .main .event-info .es-stand {
    font-size: 14px;
    color: #2a7de0;
}

.es-banner-5 .main .event-info .es-location {
    font-size: 12px;
    color: var(--dark);
    opacity: 0.4;
}

.es-banner-5 .bottom-bar {
    background: var(--blue);
    padding: 32px 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.es-banner-5 .bottom-bar .cta {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--dark);
    text-transform: uppercase;
}

.es-banner-5 .bottom-bar .sep {
    width: 1px;
    height: 24px;
    background: var(--dark);
    opacity: 0.2;
}

.es-banner-5 .bottom-bar .web {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 500;
    color: var(--dark);
    opacity: 0.6;
}

/* ==========================================
   ES-BANNER 6 — LinkedIn Cover (1584×396)
   ========================================== */
.es-banner-6 {
    background: var(--dark);
    display: flex;
    align-items: center;
    padding: 0 80px;
    gap: 48px;
}

.es-banner-6 .left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.es-banner-6 .left .pygmalios-logo {
    height: 11px;
    opacity: 0.4;
}

.es-banner-6 .big-y {
    font-size: 160px;
}

.es-banner-6 .divider {
    width: 1px;
    height: 120px;
    background: rgba(238,240,244,0.08);
    flex-shrink: 0;
}

.es-banner-6 .center {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.es-banner-6 .center .headline {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: var(--light);
    opacity: 0.8;
}

.es-banner-6 .center .headline em {
    color: #e03e3e;
    font-style: normal;
    font-weight: 700;
    opacity: 1;
}

.es-banner-6 .center .details {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--light);
    opacity: 0.35;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.es-banner-6 .center .details span {
    color: var(--blue);
    opacity: 1;
}

.es-banner-6 .right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.es-banner-6 .right .es-logo {
    height: 44px;
}

.es-banner-6 .right .es-date {
    font-size: 16px;
}

/* ==========================================
   ES-BANNER 7 — "Ask Y" (1080×1080)
   ========================================== */
.es-banner-7 {
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(74,158,255,0.08) 0%, var(--dark) 70%);
    display: flex;
    flex-direction: column;
}

.es-banner-7 .top-bar {
    padding: 36px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(238,240,244,0.06);
}

.es-banner-7 .logos {
    display: flex;
    align-items: center;
    gap: 24px;
}

.es-banner-7 .logos .sep {
    width: 1px;
    height: 28px;
    background: rgba(238,240,244,0.12);
}

.es-banner-7 .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.es-banner-7 .ask-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 32px;
    font-weight: 500;
    color: var(--light);
    opacity: 0.4;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 60px;
}

.es-banner-7 .big-y {
    font-size: 420px;
}

.es-banner-7 .tagline {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 500;
    font-size: 34px;
    color: var(--light);
    opacity: 0.65;
    margin-top: 60px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.es-banner-7 .tagline em {
    color: var(--blue);
    font-style: normal;
    font-weight: 700;
    opacity: 1;
}

.es-banner-7 .bottom-bar {
    padding: 28px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(238,240,244,0.06);
}

.es-banner-7 .es-date-small {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--light);
    opacity: 0.35;
    letter-spacing: 0.1em;
}

/* ==========================================
   ES-BANNER 8 — "Y answers your whys" (1080×1080)
   ========================================== */
.es-banner-8 {
    background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(74,158,255,0.07) 0%, var(--dark) 70%);
    display: flex;
    flex-direction: column;
}

.es-banner-8 .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px;
}

.es-banner-8 .big-y {
    font-size: 320px;
}

.es-banner-8 .tagline {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 600;
    font-size: 52px;
    color: var(--light);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-top: 12px;
}

.es-banner-8 .tagline em {
    color: var(--blue);
    font-style: normal;
    font-weight: 800;
}

.es-banner-8 .sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    color: var(--light);
    letter-spacing: 0.25em;
    opacity: 0.3;
    text-transform: uppercase;
    margin-top: 24px;
}

.es-banner-8 .bottom-bar {
    padding: 28px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(238,240,244,0.06);
}

.es-banner-8 .left-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.es-banner-8 .left-info .es-logo {
    height: 32px;
}

.es-banner-8 .es-date-small {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--light);
    opacity: 0.4;
    letter-spacing: 0.1em;
}

/* ==========================================
   ES-BANNER 9 — "Ask Y" Story (1080×1920)
   ========================================== */
.es-banner-9 {
    background: var(--dark);
    display: flex;
    flex-direction: column;
}

.es-banner-9 .top {
    padding: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(238,240,244,0.06);
}

.es-banner-9 .y-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.es-banner-9 .y-section .ask-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 40px;
    font-weight: 500;
    color: var(--light);
    opacity: 0.35;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-bottom: 72px;
}

.es-banner-9 .y-section .big-y {
    font-size: 520px;
}

.es-banner-9 .msg-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 48px 80px;
    background: linear-gradient(0deg, rgba(74,158,255,0.04) 0%, transparent 100%);
    gap: 24px;
}

.es-banner-9 .msg-section .tagline {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    color: var(--light);
    letter-spacing: -0.02em;
}

.es-banner-9 .msg-section .tagline em {
    color: var(--blue);
    font-style: normal;
    font-weight: 800;
}

.es-banner-9 .msg-section .questions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.es-banner-9 .msg-section .questions span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    color: var(--light);
    opacity: 0.35;
    letter-spacing: 0.05em;
    border: 1px solid rgba(238,240,244,0.06);
    padding: 10px 24px;
    border-radius: 100px;
}

.es-banner-9 .event-bar {
    padding: 28px 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    border-top: 1px solid rgba(238,240,244,0.06);
}

.es-banner-9 .event-bar .es-date {
    font-size: 18px;
}

.es-banner-9 .event-bar .es-stand {
    font-size: 14px;
}

.es-banner-9 .event-bar .es-location {
    font-size: 12px;
}

.es-banner-9 .bottom {
    background: var(--blue);
    padding: 36px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.es-banner-9 .bottom .cta {
    font-family: 'TASA Orbiter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--dark);
    text-transform: uppercase;
}

.es-banner-9 .bottom .web {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    opacity: 0.6;
}