/* =========================================
MIDNIGHT’S MONSOON — FULL CSS (ORDER + POEMS)
v2.1 — “Form-height mirror”: cover matches form height,
image scales to panel width (can shrink), no crop.
Paste-ready.
========================================= */

/* -------- Base: spacing & headings -------- */
section { padding: 10px 10px; }
.section-h { margin-bottom: 8px; line-height: 1.2; text-align: center; }

/* =========================================
ORDER (Form + Cover)

* Two columns
* Right (cover) height = Left (form) height
* Image fits panel width; may shrink (no cropping)
* Compact form (doesn’t stretch to match cover — cover mirrors form)
  ========================================= */

/* Section-specific heading (if needed) */
#order .section-h { margin-bottom: 16px; }

/* Two-column grid */
#order .order-grid{
display: grid;
grid-template-columns: 1.25fr .95fr;   /* cover slightly wider */
gap: 8px;
align-items: stretch;                   /* make row height = tallest (form) */
}

/* Let grid items stretch children only if they need */
#order .order-grid > div{
display: flex;
flex-direction: column;
min-height: 0;
}

/* ===== Cover panel (mirrors form height; no crop) ===== */
#order .order-cover-wrap{
width: 100%;
/* Remove fixed aspect ratio; let height come from grid row (form) */
height: 100%;
border-radius: 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
overflow: hidden;                        /* keep internals tidy */
position: relative;
box-shadow: 0 18px 40px rgba(0,0,0,.34);
padding: 0;                              /* no internal padding */
line-height: 0;                          /* kill inline-image gap */
box-sizing: border-box;
display: flex;                           /* allow children to size inside */
align-items: stretch;
justify-content: center;
}

/* Optional inner padding without affecting height calc */
#order .order-cover-wrap .cover-pad{
position: absolute;
inset: 0;
padding: 10px 8px 0 4px;                /* adjust or remove as desired */
pointer-events: none;
}

/* Fill the frame; keep layers from adding height */
#order .order-cover-wrap .cover-under,
#order .order-cover-wrap .tiles,
#order .order-cover-wrap picture,
#order .order-cover-wrap .cover-pad{
position: absolute;
inset: 0;
}

/* Actual image:

* Fit panel width
* Preserve aspect (no crop)
* May shrink to keep within height
  */
  #order .order-cover-wrap img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;                    /* no cropping; contain inside panel */
  object-position: center;                /* center it */
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  }

/* Any hint/badge pinned so it won’t change height */
#order .order-cover-wrap .hint{
position: absolute;
bottom: 8px;
right: 8px;
}

/* Ensure the cover stretches with the grid row (form height) */
#order .order-grid > .order-cover-wrap{ align-self: stretch; }

/* ===== Cover zoom (fullscreen) ===== */
#order #orderCover.zoomed{
position: fixed !important;
inset: 0;
margin: auto;
width: min(92vmin, 980px);
height: auto;
max-height: 98vh;
z-index: 9999;
cursor: zoom-out;
border-radius: 18px;
box-shadow: 0 28px 64px rgba(0,0,0,.65),
0 0 0 1px rgba(255,255,255,.08) inset;
filter: brightness(1.04) contrast(1.04);
}
body.order-zoom-active::after{
content: "";
position: fixed; inset: 0;
background: rgba(0,0,0,.18);
z-index: 9998;
}

/* ===== Form card (compact; natural height driver) ===== */
#order .form{
flex: 0;                                /* natural height (drives row height) */
display: flex;
flex-direction: column;
align-self: start;                       /* hug top */
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 10px 8px 6px;
box-shadow: 0 14px 34px rgba(0,0,0,.26);
box-sizing: border-box;
}

/* Form rows */
#order .row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 6px;
}
#order .row.single{ grid-template-columns: 1fr; }

/* Inputs */
#order label{
font-size: .92rem;
display: block;
margin-bottom: 6px;
color: var(--muted, #9aa3c7);
}
#order .input,
#order textarea{
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.05);
color: var(--text, #e8ecff);
font-size: 1rem;
}
#order textarea{ resize: vertical; }

/* Price + actions */
#order .price{
margin: 4px 0 6px;
font-size: 1.08rem;
display: flex;
justify-content: space-between;
gap: 10px;
}
#order .form-actions{
display: flex;
gap: 12px;
margin: 8px 0 10px;
}
#order .btn{
padding: 12px 18px;
border-radius: 10px;
border: 0;
cursor: pointer;
font-weight: 600;
background: var(--blue, #3a6ff7);
color: #fff;
}
#order .btn.ghost{
background: transparent;
border: 1px solid var(--muted, #9aa3c7);
color: var(--muted, #9aa3c7);
}
#order .fine{ color: var(--muted, #9aa3c7); font-size: .9rem; }

/* Order responsive */
@media (max-width: 980px){
#order .order-grid{ grid-template-columns: 1fr; gap: 16px; }
#order .row{ grid-template-columns: 1fr; }
/* When stacked, give cover a reasonable presence */
#order .order-cover-wrap{
height: auto;              /* break out of row-sync */
min-height: 420px;         /* presence when stacked */
}
#order .order-cover-wrap img{
width: 100%;
height: 100%;
object-fit: contain;
}
}

/* =========================================
STORM OF POEMS (Horizontal Reel)

* Centered container
* Arrows
* Small inter-card gap (6px)
  ========================================= */

#poems{ padding: 64px 20px; }
#poems .container.header{
max-width: 1100px;
margin: 0 auto 12px;
}

/* Reel wrapper — centered with tight arrow gutters */
#poems .camera-reel-wrap{
position: relative;
max-width: min(1200px, 92vw);
margin: 0 auto;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
}

/* Horizontal track */
#poems #poemReelTrack{
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(150px, 34vw);
gap: 6px;                               /* tight gap */
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 2px 2px;
scrollbar-width: thin;
}
#poemReelTrack::-webkit-scrollbar{ height: 6px; }
#poemReelTrack::-webkit-scrollbar-thumb{
background: rgba(255,255,255,.22);
border-radius: 6px;
}

/* Each tile snaps nicely */
#poemReelTrack > *{
scroll-snap-align: center;
margin: 0;                               /* kill accidental margins */
}

/* Arrows */
#poems .reel-btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.20);
background: rgba(15,22,48,.55);          /* fixed invalid rgba */
backdrop-filter: blur(16px);
box-shadow: 0 10px 22px rgba(0,0,0,.28);
font-size: 24px;
line-height: 0;
color: var(--text, #e8ecff);
cursor: pointer;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
}
#poems .reel-btn:hover{ background: rgba(15,22,48,.75); }
#poems .reel-btn.left{ left: 8px; }
#poems .reel-btn.right{ right: 8px; }
#poems .reel-btn[disabled]{ opacity: .4; pointer-events: none; }

/* Default poem card */
.poem-card{
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
padding: 0px;
min-height: 140px;
box-shadow: 0 6px 6px rgba(0,0,0,.2);
}

/* Reel responsive */
@media (max-width: 700px){
#poems .camera-reel-wrap{ padding-left: 28px; padding-right: 28px; }
#poems .reel-btn{ width: 38px; height: 38px; font-size: 22px; }
}

/* =========================================
FINAL SAFETY OVERRIDES (keep at end)
========================================= */

/* Ensure cover mirrors form height (disable any earlier aspect-ratio) */
#order .order-cover-wrap{
aspect-ratio: auto !important;
height: 100% !important;
}
#order .order-grid > .order-cover-wrap{
align-self: stretch !important;
}

/* Image containment guarantee */
#order .order-cover-wrap img{
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
}

/* Keep tiny gaps on reel */
#poems #poemReelTrack{
gap: 6px !important; column-gap: 6px !important; row-gap: 6px !important;
}