/* =====================================================================
   STRYV4/~  ·  POSTCARDS PLUGIN  ·  FRONT STYLES
   File: postcards-front_STR.css   ·   v2   ·   Tag: STR
   Lives in the PLUGIN folder; enqueued (handle stryv-pc-front) only
   on pages that render postcards, at priority 1000.
   ---------------------------------------------------------------------
   THIS IS NOT core-canvas. The theme's Section 8 remains the sole
   owner of core-canvas.css (golden rule 1). This sheet only ADDS:

     1. Slot sizes via [data-slot] attribute rules. The default
        'postcard' slot (1536×512) has NO rule here on purpose —
        core-canvas.css keeps defining it, so every existing card is
        pixel-identical to v1. Non-default slots win over the
        core-canvas defaults by SPECIFICITY (.class[attr] beats
        .class), not by load order.
     2. The advert wrapper used when adverts interleave the flow.
     3. The Library's visitor controls and pagination (moved out of
        the v1 inline <style>).

   Nothing here targets a card's own internals. Never add per-card
   fixes to this file (golden rule 6 applies to it as much as to
   core-canvas).
   ===================================================================== */


/* =====  1. SLOT SIZES  =====                           /* CodeNumber 1.0 */

/* 'postcard' (1536×512): deliberately NO rule — core-canvas owns it. */

.hp-postcard-canvas[data-slot="megascreen"]    { max-width:1536px; height:1024px; }
.hp-postcard-canvas[data-slot="inline-card"]   { max-width:1050px; height:420px; }
.hp-postcard-canvas[data-slot="tile"]          { max-width:512px;  height:512px; }
.hp-postcard-canvas[data-slot="rail-tall"]     { max-width:300px;  height:600px; }
.hp-postcard-canvas[data-slot="rail-short"]    { max-width:300px;  height:250px; }
.hp-postcard-canvas[data-slot="banner-wide"]   { max-width:970px;  height:250px; }
.hp-postcard-canvas[data-slot="banner-narrow"] { max-width:728px;  height:90px;  }

/* Tall slots must not fight small screens. */             /* CodeNumber 1.1 */
@media (max-width:900px){
  .hp-postcard-canvas[data-slot="megascreen"] { height:auto; min-height:512px; }
}




/* =====  2. ADVERT WRAPPER  =====                       /* CodeNumber 2.0 */

/* One advert block sitting in the card flow. Width matches its
   chosen slot; height is the advert markup's own business, so an
   empty render costs no space. */

.hp-postcard-adslot{
  width:100%;
  max-width:1536px;
  display:flex;
  justify-content:center;
}
.hp-postcard-adslot[data-slot="inline-card"]   { max-width:1050px; }
.hp-postcard-adslot[data-slot="tile"]          { max-width:512px; }
.hp-postcard-adslot[data-slot="rail-tall"],
.hp-postcard-adslot[data-slot="rail-short"]    { max-width:300px; }
.hp-postcard-adslot[data-slot="banner-wide"]   { max-width:970px; }
.hp-postcard-adslot[data-slot="banner-narrow"] { max-width:728px; }
.hp-postcard-adslot > *{ max-width:100%; }

/* v2.2 — the Advertise-here filler sits in the homepage 3:1 frame. */
.hp-postcard-adslot--filler{ max-width:1536px; }
.hp-pc-sbx-fill{ width:100%; }
.hp-pc-sbx-fill .stryv4-sbx{
  aspect-ratio:auto !important;   /* override the engine's inline shape ratio */
  width:100%;
  height:512px;
}
@media (max-width:900px){
  .hp-pc-sbx-fill .stryv4-sbx{ height:auto; aspect-ratio:3/1 !important; min-height:200px; }
}




/* =====  3. LIBRARY CONTROLS  =====                     /* CodeNumber 3.0 */

.hp-pc-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:0 auto 2.2rem;
  max-width:920px;
}
.hp-pc-controls input[type=search],
.hp-pc-controls select{
  padding:9px 12px;
  border:1px solid rgba(0,0,0,.25);
  border-radius:8px;
  font:600 14px/1.2 Arial, Helvetica, sans-serif;
  background:#fff;
  color:#1e1e1e;
  min-width:150px;
}
.hp-pc-controls input[type=search]{ min-width:220px; }
.hp-pc-controls .hp-pc-controls-go{
  padding:9px 18px;
  border:0;
  border-radius:8px;
  font:700 14px/1.2 Arial, Helvetica, sans-serif;
  background:#F5688A;
  color:#fff;
  cursor:pointer;
}
.hp-pc-controls .hp-pc-controls-go:hover{ background:#e2547a; }
.hp-pc-controls .hp-pc-controls-reset{
  font:600 13px/1.2 Arial, Helvetica, sans-serif;
  text-decoration:underline;
  color:inherit;
  opacity:.75;
}
.hp-pc-controls .hp-pc-controls-reset:hover{ opacity:1; }




/* =====  4. PAGINATION + EMPTY STATE  =====             /* CodeNumber 4.0 */

/* Moved verbatim from library_STR.php v1's inline <style>. */

.hp-postcard-pagination{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:3rem 0 1rem;
}
.hp-postcard-pagination .page-numbers{
  display:inline-block;
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:600;
  font-size:14px;
  background:rgba(0,0,0,0.06);
  color:inherit;
}
.hp-postcard-pagination .page-numbers.current{ background:#F5688A; color:#fff; }
.hp-postcard-pagination a.page-numbers:hover{ background:rgba(0,0,0,0.12); }
.hp-postcard-library-empty{ text-align:center; opacity:.7; }