/* =========================================
WRAPPER & SYSTEM STYLES (Gold Standard)
========================================= */
.ioa-non-ioa-events-s-tier {
position: relative;
width: 100%;
}
.ioa-non-ioa-events-s-tier *,
.ioa-non-ioa-events-s-tier *::before,
.ioa-non-ioa-events-s-tier *::after {
box-sizing: border-box;
}
/* =========================================
TELEPORT SLOTS (Gold Standard Feature)
========================================= */
.ioa-teleport-slot {
min-height: 0;
transition: all 0.3s ease;
margin-bottom: 0;
width: 100%;
}
.ioa-teleport-slot.has-content {
margin-bottom: 2rem;
animation: ioa-fade-in 0.5s ease;
}
/* Editor Visuals - Visible only in Elementor Editor (.is-editor-mode added via PHP) */
.is-editor-mode .ioa-teleport-slot {
min-height: 40px;
border: 1px dashed rgba(212, 175, 55, 0.4);
background: rgba(212, 175, 55, 0.05);
margin: 1rem 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.is-editor-mode .ioa-teleport-slot::before {
content: attr(data-label);
font-size: 11px;
color: #854d0e;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
@keyframes ioa-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================
CORE CONTAINER STYLES (Classic & Clean)
========================================= */
.ioa-events-container {
    --color-surface: #ffffff;
    --color-surface-alt: #f9fafb;
    --color-background: #ffffff;
    --color-text-primary: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-primary: #1e3a8a;
    --color-accent: #059669;
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;

    /* Top Border Gradient Defaults */
    --card-top-gradient-start: var(--color-primary);
    --card-top-gradient-end: var(--color-accent);
    --card-top-gradient-start-hover: var(--color-primary);
    --card-top-gradient-end-hover: var(--color-primary);

    /* Refined Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Spacing */
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 2.5rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    font-family: 'Inter', sans-serif;
    color: var(--color-text-secondary);
    background-color: var(--color-background);
    line-height: 1.6;
    width: 100%;
    /* Padding is now controlled via Elementor, defaults below are fallback */
    padding: var(--space-2xl) var(--space-md);
}

/* BOXED LAYOUT (Standard/Centered) */
.ioa-events-container.ioa-layout-boxed {
    max-width: 1280px; /* Default max width, overridden by slider */
    margin-left: auto;
    margin-right: auto;
}

/* FLUID LAYOUT (Full Width/Custom) */
.ioa-events-container.ioa-layout-fluid {
    max-width: 100%;
    /* Margins handled by alignment controls */
}
/* =========================================
TYPOGRAPHY (Classic & Readable)
========================================= */
.ioa-events-container h1,
.ioa-events-container h2,
.ioa-events-container h3,
.ioa-events-container h4 {
font-family: 'Poppins', sans-serif;
color: var(--color-text-primary);
line-height: 1.3;
font-weight: 600;
margin: 0;
}
.ioa-events-container h2 {
font-size: 2rem;
letter-spacing: -0.02em;
}
.ioa-events-container h3 {
font-size: 1.5rem;
letter-spacing: -0.01em;
}
.ioa-events-container p {
font-size: 1rem;
line-height: 1.75;
margin: 0 0 1rem 0;
color: var(--color-text-secondary);
}
.ioa-events-container p:last-child {
margin-bottom: 0;
}
/* =========================================
HERO SECTION (Classic, Professional)
========================================= */
.ioa-event-hero-section {
margin-bottom: var(--space-3xl);
width: 100%;
}
.ioa-event-hero-content {
margin-left: auto;
margin-right: auto;
}
.ioa-event-label {
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-sm);
padding: 0.375rem 0.875rem;
background-color: rgba(30, 58, 138, 0.08);
border-radius: var(--radius-sm);
}
.ioa-event-hero-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: var(--space-md);
line-height: 1.2;
letter-spacing: -0.025em;
}
.ioa-event-hero-description {
font-size: 1.125rem;
line-height: 1.75;
color: var(--color-text-secondary);
margin-bottom: var(--space-lg);
}
/* Status Badge */
.ioa-status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
transition: all 0.2s ease;
vertical-align: middle;
}
.ioa-status-badge svg {
width: 16px;
height: 16px;
fill: var(--color-accent);
}
/* =========================================
EVENT CARDS GRID (Professional Layout)
========================================= */
.ioa-event-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-2xl);
}
.ioa-event-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
/* Top Border - Gradient */
.ioa-event-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--card-top-gradient-start), var(--card-top-gradient-end));
opacity: 0;
transition: opacity 0.3s ease;
}
.ioa-event-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.ioa-event-card:hover::before {
opacity: 1;
background: linear-gradient(90deg, var(--card-top-gradient-start-hover), var(--card-top-gradient-end-hover));
}
.ioa-event-card-inner {
display: flex;
flex-direction: column;
height: 100%;
align-items: flex-start;
}
.ioa-event-card-icon {
width: 48px;
height: 48px;
background-color: var(--color-surface-alt);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
transition: all 0.3s ease;
flex-shrink: 0;
}
.ioa-event-card:hover .ioa-event-card-icon {
background-color: var(--color-primary);
transform: scale(1.05);
}
.ioa-event-card-icon svg {
width: 24px;
height: 24px;
fill: var(--color-text-secondary);
transition: fill 0.3s ease;
}
.ioa-event-card:hover .ioa-event-card-icon svg {
fill: #ffffff;
}
.ioa-event-card-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--space-sm);
line-height: 1.3;
width: 100%;
}
.ioa-event-card-excerpt {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-text-secondary);
margin-bottom: var(--space-md);
flex-grow: 1;
width: 100%;
}
.ioa-event-card-action {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: gap 0.2s ease;
margin-top: auto;
}
.ioa-event-card:hover .ioa-event-card-action {
gap: 0.625rem;
}
.ioa-event-card-action::after {
content: '→';
font-size: 1.125rem;
transition: transform 0.2s ease;
}
.ioa-event-card:hover .ioa-event-card-action::after {
transform: translateX(2px);
}
/* =========================================
MODAL SYSTEM (Clean & Professional)
========================================= */
.ioa-modal-backdrop {
--modal-bg: #ffffff;
--modal-text: #111827;
--modal-text-secondary: #4b5563;
--modal-primary: #1e3a8a;
--modal-border: #e5e7eb;
--modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
z-index: 99999999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;

opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ioa-modal-backdrop.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ioa-modal-container {
background-color: var(--modal-bg);
width: 100%;
max-width: 700px;
max-height: 85vh;
border-radius: 12px;
box-shadow: var(--modal-shadow);
display: flex;
flex-direction: column;
position: relative;
border: 1px solid var(--modal-border);
transform: scale(0.95) translateY(20px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ioa-modal-backdrop.is-open .ioa-modal-container {
transform: scale(1) translateY(0);
}
.ioa-modal-header {
padding: 24px;
border-bottom: 1px solid var(--modal-border);
display: flex;
align-items: flex-start;
justify-content: space-between;
background-color: #fff;
border-radius: 12px 12px 0 0;
flex-shrink: 0;
}
.ioa-modal-header-title {
font-family: 'Poppins', sans-serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--modal-text);
margin: 0;
line-height: 1.2;
padding-right: 20px;
}
.ioa-modal-close {
background: transparent;
border: none;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
padding: 0;
color: #9ca3af;
}
.ioa-modal-close:hover {
background-color: #f3f4f6;
color: #111827;
transform: rotate(90deg);
}
.ioa-modal-close::before,
.ioa-modal-close::after {
content: '';
position: absolute;
width: 16px;
height: 2px;
background-color: currentColor;
}
.ioa-modal-close::before { transform: rotate(45deg); }
.ioa-modal-close::after { transform: rotate(-45deg); }
.ioa-modal-body {
padding: 30px;
overflow-y: auto;
background-color: #fff;
color: var(--modal-text-secondary);
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.6;
border-radius: 0 0 12px 12px;
}
.ioa-modal-body p {
margin-bottom: 1.5em;
color: var(--modal-text-secondary);
}
.ioa-modal-body h3,
.ioa-modal-body h4 {
color: var(--modal-text);
margin-top: 1.5em;
margin-bottom: 0.75em;
font-weight: 600;
}
.ioa-modal-body ul {
margin-bottom: 1.5em;
padding-left: 1.5em;
}
.ioa-modal-body li {
margin-bottom: 0.5em;
}
.ioa-modal-body::-webkit-scrollbar {
width: 8px;
}
.ioa-modal-body::-webkit-scrollbar-track {
background: #f1f1f1;
}
.ioa-modal-body::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 4px;
}
.ioa-modal-body::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
/* =========================================
RESPONSIVE DESIGN
========================================= */
@media (max-width: 992px) {
.ioa-event-cards-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-md);
}
}
@media (max-width: 768px) {
.ioa-events-container {
padding: var(--space-lg) var(--space-sm);
}
code
Code
.ioa-event-hero-title {
    font-size: 2rem;
}

.ioa-event-hero-description {
    font-size: 1rem;
}

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

.ioa-modal-container {
    max-height: 90vh;
    margin: var(--space-sm);
}

.ioa-modal-header,
.ioa-modal-body {
    padding: var(--space-md);
}

.ioa-modal-header-title {
    font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.ioa-event-hero-title {
font-size: 1.75rem;
}
code
Code
.ioa-event-hero-section {
    margin-bottom: var(--space-2xl);
}

.ioa-event-card {
    padding: var(--space-md);
}
}