/* =====================================================================
   ===== STRYV4/~ ADVERTS — SLOT STYLES                            =====
   =====================================================================
   Plugin-owned CSS for Tile, Rail, and Banner shapes.
   Megascreen and Postcard inherit from the Stryv4/~ child theme
   (hp-postcard-canvas / sunburst engine) and are NOT styled here.
   ===================================================================== */










/* CodeNumber 1.1 — Universal slot base (every slot has .stryv4-slot) */

.stryv4-slot {
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    font-family: inherit;
}

/* The neutral wrapper link covers the whole slot. */
.stryv4-slot__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
}

/* Universal "Sponsored" label — ASA / CAP compliant. */
.stryv4-slot__label {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 20;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-radius: 2px;
    pointer-events: none;
    user-select: none;
}

/* Universal content area when no image is supplied. */
.stryv4-slot__placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.stryv4-slot__headline {
    margin: 0 0 12px;
    font-weight: 700;
    line-height: 1.2;
}

.stryv4-slot__cta {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    background: #fff;
    color: #222;
    text-decoration: none;
}










/* =====================================================================
   ===== MEGASCREEN (1536 × 1024) — fallback styling               =====
   =====================================================================
   When the child theme's sunburst CSS is loaded on the page (homepage),
   its more specific rules on .hp-postcard-canvas / .hp-sunburst take
   over. On every other page, these defaults give us a visible card.
   ===================================================================== */

.stryv4-slot--megascreen {
    aspect-ratio: 3 / 2;
    max-width: 1536px;
    margin: 32px auto;
    border-radius: 12px;
    background: linear-gradient(135deg, #2a2f4a, #3a2b4e 50%, #4a3b5e);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.stryv4-slot--megascreen .hp-postcard-content,
.stryv4-slot--megascreen .advert-layout {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 48px 32px;
    box-sizing: border-box;
}

.stryv4-slot--megascreen .advert-headline {
    font-size: clamp( 28px, 4vw, 56px );
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 28px;
    max-width: 1100px;
}

.stryv4-slot--megascreen .sb-btn-dark,
.stryv4-slot--megascreen .sb-btn-light {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}
.stryv4-slot--megascreen .sb-btn-dark  { background: #fff; color: #222; }
.stryv4-slot--megascreen .sb-btn-light { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.6); }

/* On narrow viewports, allow it to be taller (text doesn't truncate). */
@media (max-width: 768px) {
    .stryv4-slot--megascreen { aspect-ratio: auto; min-height: 320px; }
    .stryv4-slot--megascreen .hp-postcard-content,
    .stryv4-slot--megascreen .advert-layout { padding: 32px 20px; }
}










/* =====================================================================
   ===== POSTCARD (1050 × 420) — fallback styling                  =====
   ===================================================================== */

.stryv4-slot--postcard {
    aspect-ratio: 1050 / 420;
    max-width: 1050px;
    margin: 32px auto;
    border-radius: 8px;
    background: linear-gradient(135deg, #2a2f4a, #4a3b5e);
    color: #fff;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
}

.stryv4-slot--postcard .hp-postcard-content,
.stryv4-slot--postcard .advert-layout {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 32px 28px;
    box-sizing: border-box;
}

.stryv4-slot--postcard .advert-headline {
    font-size: clamp( 22px, 2.6vw, 36px );
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 18px;
    max-width: 800px;
}

.stryv4-slot--postcard .sb-btn-dark,
.stryv4-slot--postcard .sb-btn-light {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
}
.stryv4-slot--postcard .sb-btn-dark  { background: #fff; color: #222; }
.stryv4-slot--postcard .sb-btn-light { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.6); }

@media (max-width: 768px) {
    .stryv4-slot--postcard { aspect-ratio: auto; min-height: 220px; }
    .stryv4-slot--postcard .hp-postcard-content,
    .stryv4-slot--postcard .advert-layout { padding: 24px 18px; }
}










/* =====================================================================
   ===== HIDE SUNBURST DECORATIVE LAYERS WHEN UNSTYLED             =====
   =====================================================================
   The hp-sunburst-layer / hp-ray / hp-sunburst-fade elements emitted by
   the Megascreen and Postcard templates are decorative. When the child
   theme's sunburst CSS isn't loaded, these elements have no styles and
   would just be empty divs in the flow. The base .stryv4-slot has
   overflow:hidden which already clips them; this rule also keeps them
   from creating layout gaps inside flex containers.
   ===================================================================== */

.stryv4-slot--megascreen > .hp-sunburst-layer,
.stryv4-slot--megascreen > .hp-sunburst-fade,
.stryv4-slot--megascreen > .hp-sunburst-glow,
.stryv4-slot--megascreen > .hp-sunburst-haze,
.stryv4-slot--postcard   > .hp-sunburst-layer,
.stryv4-slot--postcard   > .hp-sunburst-fade,
.stryv4-slot--postcard   > .hp-sunburst-glow,
.stryv4-slot--postcard   > .hp-sunburst-haze {
    position: absolute;
    inset: 0;
    pointer-events: none;
}










/* =====================================================================
   ===== TILE (512 × 512)                                          =====
   ===================================================================== */

.stryv4-slot--tile {
    aspect-ratio: 1 / 1;
    max-width: 512px;
    margin: 24px auto;
    border-radius: 8px;
    background: linear-gradient(135deg, #2a2f4a, #4a3b5e);
    color: #fff;
}

.stryv4-slot--tile .stryv4-slot__headline {
    font-size: 22px;
}










/* =====================================================================
   ===== RAIL TALL (300 × 600) + RAIL SHORT (300 × 250)            =====
   ===================================================================== */

.stryv4-slot--rail-tall,
.stryv4-slot--rail-short {
    width: 300px;
    margin: 0 auto;
    border-radius: 4px;
    background: linear-gradient(180deg, #1f2638, #2c3554);
    color: #fff;
}

.stryv4-slot--rail-tall  { height: 600px; }
.stryv4-slot--rail-short { height: 250px; }

.stryv4-slot--rail-tall  .stryv4-slot__headline { font-size: 20px; }
.stryv4-slot--rail-short .stryv4-slot__headline { font-size: 16px; }

/* Sticky behaviour when used in a sidebar. */
.stryv4-slot--rail-tall.is-sticky,
.stryv4-slot--rail-short.is-sticky {
    position: sticky;
    top: 80px;
}

/* On narrow viewports, sidebar rails reflow inline. */
@media (max-width: 1100px) {
    .stryv4-slot--rail-tall,
    .stryv4-slot--rail-short {
        position: static;
        margin: 24px auto;
    }
}










/* =====================================================================
   ===== BANNER WIDE (970 × 250) + BANNER NARROW (728 × 90)        =====
   ===================================================================== */

.stryv4-slot--banner-wide,
.stryv4-slot--banner-narrow {
    width: 100%;
    margin: 24px auto;
    border-radius: 4px;
    background: linear-gradient(90deg, #1f2638, #3a2b4e);
    color: #fff;
}

.stryv4-slot--banner-wide   { max-width: 970px; aspect-ratio: 970 / 250; }
.stryv4-slot--banner-narrow { max-width: 728px; aspect-ratio: 728 / 90; }

.stryv4-slot--banner-wide   .stryv4-slot__headline { font-size: 24px; }
.stryv4-slot--banner-narrow .stryv4-slot__headline { font-size: 14px; margin-bottom: 6px; }
.stryv4-slot--banner-narrow .stryv4-slot__cta      { font-size: 12px; padding: 4px 10px; }

/* On narrow viewports, scale down. */
@media (max-width: 768px) {
    .stryv4-slot--banner-wide   { aspect-ratio: auto; min-height: 200px; }
    .stryv4-slot--banner-narrow { aspect-ratio: auto; min-height: 80px; }
}










/* =====================================================================
   ===== HONEYPOT (off-screen, never visible to humans)            =====
   ===================================================================== */

.stryv4-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: auto; /* bots may still detect and click */
}










/* =====================================================================
   ===== IMAGE-BACKED SLOTS (when creative has image_path)         =====
   ===================================================================== */

.stryv4-slot__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}