/**
 * NW Event Tickets — site-side component styles
 *
 * Spacing is controlled entirely by component-owned CSS custom properties.
 * All defaults are defined here and work without any template configuration.
 *
 * --nwtickets-top-offset is set automatically by a small inline <script>
 * included in every public view template.  nwMeasure() scans #sp-header,
 * .nw-site-banner, and fixed/sticky elements on DOMContentLoaded, load, and
 * resize, then adds --nwtickets-top-space and writes the combined total as a
 * single px value.  Avoids calc(var+var) which the Raees CSS bundler breaks
 * by stripping the required whitespace around + in calc().  Fallback: 3rem.
 *
 * Optional template override (any property):
 *
 *   .com-nwtickets-view {
 *       --nwtickets-top-space:    4rem;
 *       --nwtickets-bottom-space: 6rem;
 *       --nwtickets-max-width:    1140px;
 *       --nwtickets-inner-px:     2rem;
 *   }
 */

/* -------------------------------------------------------------------------
 * Outer wrapper — spacing only, no width constraints.
 * Every public view uses this class as the outermost element.
 * ---------------------------------------------------------------------- */
.com-nwtickets-view {
    /* Component-owned spacing defaults */
    --nwtickets-top-space:    3rem;
    --nwtickets-bottom-space: 5rem;
    --nwtickets-max-width:    960px;
    --nwtickets-inner-px:     1.5rem;
    --nwtickets-hero-gap:     2rem;

    padding-top:    var(--nwtickets-top-offset, 3rem);
    padding-bottom: var(--nwtickets-bottom-space);
}

/* -------------------------------------------------------------------------
 * Inner wrapper — width + centering, component-owned.
 * Placed inside .com-nwtickets-view in every template.
 * ---------------------------------------------------------------------- */
.com-nwtickets-inner {
    max-width:      var(--nwtickets-max-width);
    margin-inline:  auto;
    padding-inline: var(--nwtickets-inner-px);
}

/* -------------------------------------------------------------------------
 * Hero image
 * ---------------------------------------------------------------------- */
.com-nwtickets-hero {
    margin-bottom: var(--nwtickets-hero-gap);
    overflow: hidden;
    border-radius: 4px;
}

.com-nwtickets-hero a {
    display: block;
    line-height: 0;
}

.com-nwtickets-hero img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s ease;
}

.com-nwtickets-hero a:hover img,
.com-nwtickets-hero a:focus img {
    opacity: 0.92;
}