/*
 * EventHive Frontend System Styles
 *
 * Shared controlled frontend error/fallback styles only.
 * Normal layout UI belongs in layout-base.css and layout-{layout}.css.
 */

.eventhive-template--error,
.eventhive-template--error *,
.eventhive-template--error *::before,
.eventhive-template--error *::after {
    box-sizing: border-box;
}

.eventhive-template--error {
    --eh-container-width: var(--eventhive-container-width, 1140px);
    --eh-container-padding: clamp(1rem, 1vw, 1.4rem);
    flex: 0 0 auto;
    width: calc(100vw - (var(--eh-container-padding) + var(--eh-container-padding)));
    max-width: none;
    margin-inline: calc(50% - 50vw + var(--eh-container-padding));
    color: #1e293b;
    padding-block: clamp(2rem, 2.5vw, 3rem);
}

.eventhive-template--error .eventhive-container {
    display: grid;
    gap: clamp(1.4rem, 1.5vw, 2rem);
    width: 100%;
    max-width: var(--eh-container-width);
    margin-inline: auto;
}

.eventhive-error-header__title,
.eventhive-error-message__title,
.eventhive-error-message__description {
    margin: 0;
}

.eventhive-error-header__title {
    font-size: var(--eh-heading-h1, clamp(1.78rem, 1.35vw + 1.51rem, 2.59rem));
    line-height: 1.2;
}

.eventhive-error-message {
    display: grid;
    place-items: center;
    gap: clamp(0.6rem, 0.5vw, 0.9rem);
    min-height: 16rem;
    border: 1px solid #dbe3ee;
    border-radius: clamp(0.5rem, 0.5vw, 0.65rem);
    background: #ffffff;
    padding: clamp(1.4rem, 8vw, 4rem);
    text-align: center;
}

.eventhive-error-message__title {
    font-size: var(--eh-heading-h3, clamp(1.41rem, 0.66vw + 1.28rem, 1.8rem));
    line-height: 1.2;
}

.eventhive-error-message__description {
    max-width: 36rem;
    color: #64748b;
}