/* ============================================================
   PLOTMI NEWS — LAYOUT SYSTEM
   news-layouts.css

   Six card templates. Three evergreen (any story), three
   specific (only fire on a real match).

     01  Big Impact   specific   box office / ratings / records
     02  Orbit        evergreen  black + gold
     03  Editorial    evergreen  pearl rose
     05  Exec Shift   specific   hires / exits / firings
     06  Festival     specific   the ticket — festivals / awards
     07  Stack        evergreen  aqua + gold headline

   Template 04 was retired.

   Every card is full width and centered. No split columns,
   no side art panels, no diagonal rails.

   Nothing here loads an external photograph. Every visual is
   built from CSS so there are no image rights to clear.

   Scoped under .pmn- so it can never collide with Circle.
   ============================================================ */

/* ---------- shared shell ---------- */

.pmn-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  min-height:320px;
  display:flex;
  flex-direction:column;
  font-family:Inter,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  container-type:inline-size;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 20px 46px rgba(8,5,2,.22);
  isolation:isolate;
}

.pmn-card::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:9;
  pointer-events:none;
  border-radius:21px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

/* the copy column — always centered */
.pmn-body{
  position:relative;
  z-index:4;
  padding:30px 34px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  flex:1;
  min-width:0;
}

.pmn-meta,
.pmn-foot{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:9.5px;
  letter-spacing:.16em;
  font-weight:800;
}
.pmn-meta{opacity:.86}
.pmn-meta span + span::before{content:"\2022";margin-right:12px;opacity:.45}

.pmn-foot{
  border-top:1px solid rgba(0,0,0,.14);
  padding-top:12px;
  margin-top:auto;
  width:100%;
  font-size:9.5px;
  letter-spacing:.14em;
  opacity:.72;
}

.pmn-light .pmn-meta,
.pmn-light .pmn-foot{color:rgba(255,255,255,.72)}
.pmn-light .pmn-foot{border-color:rgba(255,255,255,.18)}

.pmn-card p{
  font-size:14.5px;
  line-height:1.45;
  margin:0 auto 20px;
  max-width:460px;
  letter-spacing:-.01em;
  text-align:center;
}
.pmn-card h2{margin:0;text-align:center}

.pmn-kicker{
  font-size:11px;
  letter-spacing:.26em;
  font-weight:900;
  text-transform:uppercase;
  margin-top:30px;
}

.pmn-cmt{cursor:pointer;transition:opacity .15s ease}
.pmn-cmt:hover{opacity:.65}

/* ============================================================
   01 — BIG IMPACT   (SPECIFIC: box office, ratings, records)
   Cream paper, oversized stat. Needs story.stat.
   ============================================================ */

.pmn-impact{
  color:#171513;
  background:radial-gradient(120% 100% at 0% 0%,#fffaf0 0%,#efe4d0 57%,#e3d2b8 100%);
  border-color:rgba(143,90,27,.22);
}
.pmn-impact .pmn-body{
  background:
    linear-gradient(115deg,rgba(255,255,255,.42),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.22),transparent 72%);
}
.pmn-impact-title{
  font-family:Georgia,'Playfair Display',serif;
  font-size:clamp(30px,6.4cqi,60px);
  line-height:.88;
  margin-top:30px;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.pmn-impact-stat{
  font:900 clamp(46px,11cqi,110px)/.82 'Arial Black',Arial,sans-serif;
  margin-top:16px;
  letter-spacing:-.06em;
  background:linear-gradient(180deg,#c84d1d 0%,#8f250f 72%,#d16427 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 7px 14px rgba(117,46,12,.16));
}
.pmn-impact-sub{
  font-size:12px;
  letter-spacing:.22em;
  font-weight:900;
  margin-top:10px;
}
.pmn-impact p{color:#554d43;margin-top:16px}

/* ============================================================
   02 — ORBIT   (EVERGREEN)
   Black with a gold sheen. The dark one in the rotation.
   ============================================================ */

.pmn-orbit{
  color:#f6f0e2;
   background:
    radial-gradient(80% 110% at 88% 8%,rgba(214,168,88,.14),transparent 58%),
    linear-gradient(160deg,#0b0b0b 0%,#141312 46%,#050505 100%);
  border:1px solid rgba(214,168,88,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,240,205,.10),
    0 22px 48px rgba(0,0,0,.42),
    0 0 34px rgba(184,134,40,.08);
}
.pmn-orbit .pmn-kicker{color:#e6c47c}
.pmn-orbit h2{
  font-family:Georgia,'Playfair Display',serif;
  font-size:clamp(30px,7.4cqi,72px);
  line-height:.88;
  margin:10px 0 16px;
  letter-spacing:-.05em;
  color:#f8f3e7;
  text-shadow:0 10px 30px rgba(0,0,0,.32);
}
.pmn-orbit .pmn-pill{
  border:1px solid rgba(233,199,119,.6);
  border-radius:999px;
  padding:6px 13px;
  font-size:10.5px;
  letter-spacing:.2em;
  font-weight:900;
  color:#f2d79b;
  text-transform:uppercase;
  margin-bottom:16px;
}
.pmn-orbit p{color:#bdb3a3}

/* ============================================================
   03 — EDITORIAL   (EVERGREEN)
   Pearl rose. The light one in the rotation.
   ============================================================ */

.pmn-editorial{
  color:#23191c;
  background:radial-gradient(110% 130% at 50% 0%,#fffdfb 0%,#f8efe9 52%,#efd8da 100%);
  border-color:rgba(174,93,117,.18);
}
.pmn-editorial .pmn-kicker{color:#b0496c}
.pmn-editorial h2{
  font-family:Georgia,'Playfair Display',serif;
  font-size:clamp(30px,7.2cqi,70px);
  line-height:.9;
  margin:10px 0 14px;
  letter-spacing:-.05em;
}
.pmn-editorial .pmn-rule{
  width:72px;
  height:3px;
  margin:0 auto 18px;
  background:linear-gradient(90deg,#c94372,#ef9ab6);
}
.pmn-editorial p{color:#67535b}

/* ============================================================
   05 — EXEC SHIFT   (SPECIFIC: hires, exits, firings)
   Red glass. Typography only, needs no image ever.
   ============================================================ */

.pmn-exec{
  color:#fff;
  background:
    radial-gradient(80% 120% at 14% 0%,rgba(255,78,57,.28),transparent 58%),
    radial-gradient(75% 100% at 100% 82%,rgba(120,0,0,.34),transparent 62%),
    linear-gradient(145deg,#9f1717 0%,#bd2017 42%,#7e0e12 100%);
  border-color:rgba(255,126,105,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,197,180,.17),
    0 22px 48px rgba(91,0,0,.28);
}
.pmn-exec .grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.075;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:72px 72px;
}
.pmn-exec::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(126deg,transparent 0 50%,rgba(255,104,75,.12) 56%,rgba(255,215,190,.46) 59%,rgba(255,87,64,.10) 62%,transparent 67%);
}
.pmn-exec .pmn-kicker{color:rgba(255,255,255,.72)}
.pmn-exec h2{
  font:900 clamp(32px,8.6cqi,84px)/.88 'Arial Black',Arial,sans-serif;
  margin:10px 0 8px;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-shadow:0 10px 30px rgba(67,0,0,.22);
}
.pmn-exec .pmn-verb{
  font-size:clamp(15px,2.6cqi,26px);
  letter-spacing:.3em;
  font-weight:900;
  margin-bottom:16px;
  color:#ffd3c9;
  text-transform:uppercase;
}
.pmn-exec p{color:rgba(255,255,255,.86)}

/* ============================================================
   06 — FESTIVAL   (SPECIFIC: festivals, awards, nominations)
   THE TICKET. Dark brown pass with film perforations down both
   edges, torn notches at the midpoint, a gold hairline frame
   with diamond studs. No centre sheen — the warm glow lives in
   the top right corner only.
   ============================================================ */

.pmn-festival{
  color:#f2e6d2;
  background:
    radial-gradient(58% 62% at 92% 4%,rgba(214,166,78,.20),transparent 62%),
    linear-gradient(152deg,#1c1309 0%,#180f07 52%,#100a04 100%);
  border:1px solid rgba(170,126,54,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,226,178,.08),
    0 22px 48px rgba(10,6,1,.52);
}

/* gold hairline frame */
.pmn-festival .pmn-fest-frame{
  position:absolute;
  left:26px;right:26px;top:16px;bottom:16px;
  z-index:2;
  pointer-events:none;
  border-left:1px solid rgba(203,158,74,.34);
  border-right:1px solid rgba(203,158,74,.34);
}
.pmn-festival .pmn-fest-frame::before,
.pmn-festival .pmn-fest-frame::after{
  content:"";
  position:absolute;
  left:-1px;right:-1px;
  height:1px;
  background:rgba(203,158,74,.34);
}
.pmn-festival .pmn-fest-frame::before{top:0}
.pmn-festival .pmn-fest-frame::after{bottom:0}

/* diamond corner studs */
.pmn-festival .pmn-fest-corner{
  position:absolute;
  width:7px;height:7px;
  background:#c99a34;
  z-index:3;
  pointer-events:none;
  transform:rotate(45deg);
}
.pmn-festival .pmn-fest-corner.tl{left:23px;top:13px}
.pmn-festival .pmn-fest-corner.tr{right:23px;top:13px}
.pmn-festival .pmn-fest-corner.bl{left:23px;bottom:13px}
.pmn-festival .pmn-fest-corner.br{right:23px;bottom:13px}

/* film perforations */
.pmn-festival .pmn-fest-perf{
  position:absolute;
  top:0;bottom:0;
  width:14px;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  padding:14px 0;
  pointer-events:none;
}
.pmn-festival .pmn-fest-perf.l{left:5px}
.pmn-festival .pmn-fest-perf.r{right:5px}
.pmn-festival .pmn-fest-perf b{
  display:block;
  width:7px;height:11px;
  border-radius:2px;
  background:rgba(203,158,74,.20);
  box-shadow:inset 0 0 0 1px rgba(203,158,74,.26);
}

/* torn ticket notches */
.pmn-festival .pmn-fest-notch{
  position:absolute;
  top:50%;
  width:26px;height:26px;
  border-radius:50%;
  background:#0d0803;
  z-index:5;
  transform:translateY(-50%);
}
.pmn-festival .pmn-fest-notch.l{left:-13px}
.pmn-festival .pmn-fest-notch.r{right:-13px}

.pmn-festival .pmn-body{padding:34px 54px 26px}
.pmn-festival .pmn-meta{color:rgba(255,236,200,.58)}

/* kicker set between two aqua rules, like a marquee credit */
.pmn-festival .pmn-fest-eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
}
.pmn-festival .pmn-fest-eyebrow i{
  display:block;
  width:34px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(95,214,198,.7));
}
.pmn-festival .pmn-fest-eyebrow i:last-child{
  background:linear-gradient(90deg,rgba(95,214,198,.7),transparent);
}
.pmn-festival .pmn-fest-eyebrow span{
  font-size:11px;
  letter-spacing:.34em;
  font-weight:900;
  text-transform:uppercase;
  color:#5fd6c6;
}

.pmn-festival h2{
  margin:14px 0 0;
  font-family:Georgia,'Playfair Display',serif;
  font-size:clamp(30px,8cqi,76px);
  line-height:.86;
  letter-spacing:-.055em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff4d4 0%,#e8c273 40%,#a97a22 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));
}

.pmn-festival .pmn-fest-line{
  margin-top:12px;
  font:900 11px/1 Inter,Arial,sans-serif;
  letter-spacing:.5em;
  color:rgba(203,158,74,.85);
  text-transform:uppercase;
}

.pmn-festival .pmn-fest-div{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 16px;
}
.pmn-festival .pmn-fest-div i{
  display:block;
  width:52px;height:1px;
  background:rgba(203,158,74,.4);
}
.pmn-festival .pmn-fest-div b{
  width:5px;height:5px;
  background:#c99a34;
  transform:rotate(45deg);
}

.pmn-festival p{color:#c4b39b;line-height:1.5;max-width:430px}

.pmn-festival .pmn-fest-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.pmn-festival .pmn-fest-tags span{
  font-size:9.5px;
  letter-spacing:.2em;
  font-weight:800;
  text-transform:uppercase;
  color:#6fdccb;
  padding:0 14px;
  border-right:1px solid rgba(95,214,198,.28);
}
.pmn-festival .pmn-fest-tags span:last-child{border-right:0}

.pmn-festival .pmn-foot{
  border-top-color:rgba(255,222,170,.14);
  color:rgba(255,236,200,.5);
}

/* ============================================================
   07 — STACK   (EVERGREEN)
   Aqua with a gold headline. The third colour in the rotation.
   ============================================================ */

.pmn-stack{
  color:#eefaf9;
  background:
    radial-gradient(95% 120% at 92% 14%,rgba(0,209,205,.22),transparent 56%),
    radial-gradient(80% 100% at 8% 96%,rgba(16,120,140,.28),transparent 60%),
    linear-gradient(150deg,#04191d 0%,#08333a 52%,#03151a 100%);
  border-color:rgba(94,220,222,.26);
  box-shadow:
    inset 0 1px 0 rgba(180,248,250,.10),
    0 22px 48px rgba(0,20,26,.36),
    0 0 36px rgba(30,170,180,.08);
}
.pmn-stack .slab{
  position:absolute;
  right:-18%;
  top:-55%;
  width:74%;
  aspect-ratio:.42;
  transform:rotate(33deg);
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(34,150,160,.10) 18%,
    rgba(104,225,226,.72) 43%,
    rgba(214,255,255,.92) 50%,
    rgba(52,178,190,.40) 58%,
    transparent 76%);
  filter:drop-shadow(0 0 24px rgba(70,205,212,.26));
}
.pmn-stack::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(122deg,transparent 0 62%,rgba(120,235,235,.07) 67%,rgba(210,255,255,.30) 70%,rgba(46,170,180,.10) 73%,transparent 79%);
}
.pmn-stack .pmn-kicker{color:#5fdcdc}
.pmn-stack h2{
  font-family:Georgia,'Playfair Display',serif;
  font-size:clamp(30px,7.2cqi,70px);
  line-height:.89;
  margin:10px 0 14px;
  letter-spacing:-.05em;
  background:linear-gradient(180deg,#f7e2a6 0%,#e0bb63 46%,#b98a2c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.34));
}
.pmn-stack p{color:#a9cdd2}

/* ============================================================
   RESPONSIVE — the cards are single column already, so this
   only tightens padding on narrow feeds.
   ============================================================ */

@container (max-width:520px){
  .pmn-body{padding:24px 22px 20px}
  .pmn-festival .pmn-body{padding:28px 34px 22px}
  .pmn-festival .pmn-fest-tags span{padding:0 9px}
}

@media (max-width:520px){
  .pmn-card{min-height:0}
}

/* ============================================================
   POST FOOTER — the vote buttons and the comment block, skinned
   so they read as part of the card instead of floating under it.

   Circle wraps the whole post like this:

     <div class="pmn-post">
       ... PlotmiNews.render(story) ...
       <div class="pmn-tray pmn-tray-dark">   (or -light)
         <div class="pmn-votes"> ... </div>
         ... renderCommentBlock(...) ...
       </div>
     </div>

   Dark skin for templates 02, 05, 06, 07.
   Light skin for templates 01 and 03.
   ============================================================ */

.pmn-post{position:relative;width:100%}

/* the card loses its bottom corners and its bottom drop shadow so
   the tray can sit flush against it */
.pmn-post .pmn-card{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.pmn-post .pmn-card::after{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

.pmn-tray{
  position:relative;
  border-radius:0 0 22px 22px;
  border:1px solid;
  border-top:none;
  padding:18px 18px 12px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  box-shadow:0 20px 46px rgba(8,5,2,.22);
}

.pmn-tray-light{background:#e6dac2;border-color:rgba(143,90,27,.22)}
.pmn-tray-dark{background:#120c06;border-color:rgba(170,126,54,.26)}

/* the seam where the card meets the tray */
.pmn-tray::before{
  content:"";
  display:block;
  height:1px;
  margin:-18px -18px 18px;
}
.pmn-tray::before{height:2px;}
.pmn-tray-light::before{background:linear-gradient(90deg,transparent,rgba(184,134,40,.85),transparent)}
.pmn-tray-dark::before{background:linear-gradient(90deg,transparent,rgba(214,168,88,.9),transparent)}

/* ---------- the three vote buttons ---------- */

.pmn-votes{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
}

.pmn-vote-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:0;
}

.pmn-vote{
  border-radius:999px;
  padding:11px 20px;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.pmn-vote:hover{transform:translateY(-2px)}

.pmn-tray-light .pmn-vote{
  background:#fffdf7;
  border:1px solid rgba(120,80,24,.34);
  color:#7a5720;
  box-shadow:0 2px 6px rgba(90,60,20,.10);
}
.pmn-tray-dark .pmn-vote{
  background:rgba(255,236,190,.07);
  border:1px solid rgba(203,158,74,.40);
  color:#e0bd7c;
}

/* whichever option is winning */
.pmn-vote.is-lead{
  background:linear-gradient(180deg,#f3d489,#d2a55d);
  border-color:rgba(140,96,26,.6);
  color:#3a2708;
  box-shadow:0 3px 10px rgba(160,112,34,.28);
}

.pmn-vote-who{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.03em;
  min-height:12px;
  max-width:140px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pmn-tray-light .pmn-vote-who{color:#96702f}
.pmn-tray-dark .pmn-vote-who{color:#b8934f}

@container (max-width:520px){
  .pmn-votes{gap:9px}
  .pmn-vote{padding:10px 14px;font-size:10.5px}
}

@media (max-width:520px){
  .pmn-tray{padding:16px 12px 10px}
  .pmn-tray::before{margin:-16px -12px 16px}
}