/* =========================================================
   mmm-short-stories-styles.css
   Missouri Mars Mavens colorway (Mars regolith + space ink)
   Reuses the same layout/hero behavior as the Wellspring clone.
   ========================================================= */

/* =========================
   GLOBAL TOKENS (Mars Mavens defaults)
   ========================= */

:root{
  /* Primary inks (space / basalt) */
  --ink-primary: #4a2a1f;   /* warm deep brown */
  --ink-dark:    #1b1412;   /* near-black, warm */

  /* Backgrounds */
  --page-bg:     #f3e6d6;   /* dusty parchment */
  --panel-bg:    rgba(255,255,255,0.84);

  /* Accents (rust / copper) */
  --accent:      #b24a2b;
  --accent-2:    #d07b3a;

  /* Borders / shadows (warm) */
  --border-soft: rgba(90,45,30,0.18);
  --border-hard: rgba(90,45,30,0.28);
  --shadow-soft: rgba(0,0,0,0.10);

  /* Per page override (IMPORTANT: use ../ if image is next to css folder) */
  --hero-image: none;

  /* Mobile/tablet hero sizing */
  --hero-min: 260px;
  --hero-height: 42vh;
  --hero-max: 480px;

  /* Optional overlay on the full-width hero only */
  --hero-overlay: 0.26;         /* 0..1 */

  /* ===== Desktop floated hero tuning knobs ===== */
  --float-w: 80px;
  --float-h: 80px;
  --float-x: 0px;
  --float-y: 0px;
  --float-radius: 18px;
  --float-gap: 18px;
}

/* =========================
   BASE PAGE
   ========================= */

html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink-dark);
  background: var(--page-bg);
}

/* =========================
   HEADER / BRAND / NAV
   ========================= */

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;

  /* Mars regolith gradient */
  background: linear-gradient(180deg, #ecd0b6 0%, #e2b996 100%);

  border-bottom: 1px solid var(--border-soft);
}

header .brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

header h1{
  margin:0;
  font-size:22px;
  letter-spacing:0.2px;
  color: var(--ink-dark);
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

header .sub{
  font-size:13px;
  color: rgba(74,42,31,0.78);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

header nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;

  color: var(--ink-primary);
  background: rgba(255,255,255,0.72);

  border:1px solid var(--border-soft);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);

  transition: transform .08s ease, background .2s ease, border-color .2s ease;
  font-size:14px;
  white-space:nowrap;
}

.btn:hover{
  background: rgba(255,255,255,0.86);
  border-color: rgba(178,74,43,0.28);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }

/* =========================
   SHORT-STORIES HERO (FULL-WIDTH)
   Mobile/tablet only after desktop rule below.
   ========================= */

.short-stories-hero{
  position: relative;
  height: clamp(var(--hero-min), var(--hero-height), var(--hero-max));

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;

  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
}

/* Warm “space haze” overlay (tint is warm-black) */
.short-stories-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(27,20,18,var(--hero-overlay));
  pointer-events:none;
}

/* =========================
   DESKTOP FLOATED HERO (base hidden)
   ========================= */
.short-stories-hero-float{
  display:none;
}

/* =========================
   MOBILE HEADER: subline gets its own row
   ========================= */

@media (max-width: 560px){

  header{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav"
      "sub";
    align-items:start;
    gap:10px;
    padding:14px 14px;
  }

  header .brand{ grid-area: brand; min-width: 0; }
  header nav{
    grid-area: nav;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }

  .brand-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }

  header h1{
    font-size:20px;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    line-height:1.15;
  }

  header .sub{
    grid-area: sub;
    justify-self:start;

    padding:0;
    border:0;
    border-radius:0;
    background: transparent;
    box-shadow:none;

    font-size:12.5px;
    line-height:1.25;
    white-space:normal;
    max-width: 100%;
    color: rgba(74,42,31,0.75);
  }

  .btn{ padding:9px 12px; }
}

/* =========================
   STORY NAV (Prev / Index / Next)
   ========================= */

.story-nav{
  max-width: 980px;
  margin: 18px auto 10px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  box-sizing: border-box;
}

.story-nav__btn{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;

  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);

  color: rgba(27,20,18,0.92);
  min-width: 0;
}

.story-nav__btn:hover{
  transform: translateY(-1px);
}

.story-nav__kicker{
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(178,74,43,0.78);
}

.story-nav__title{
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* alignment */
.story-nav .prev{ justify-self: start; text-align: left; }
.story-nav .index{ justify-self: center; text-align: center; }
.story-nav .next{ justify-self: end; text-align: right; }

/* Mobile: stack */
@media (max-width: 700px){
  .story-nav{ grid-template-columns: 1fr; }
  .story-nav .prev,
  .story-nav .index,
  .story-nav .next{
    justify-self: stretch;
    text-align: left;
  }
  .story-nav__title{ white-space: normal; }
}

.story-progress{
  max-width: 980px;
  margin: 22px auto 8px;
  padding: 0 16px;
  font-size: 13px;
  color: rgba(27,20,18,0.68);
}
@media (min-width: 900px){
  .story-progress{ max-width: 1280px; }
}

/* =========================
   DESKTOP LAYOUT CHANGE
   - Hide the full-width hero
   - Show a floated hero at upper-right of the content
   ========================= */

@media (min-width: 900px){
  .short-stories-hero{ display:none; }

  .short-stories-hero-float{
    display:block;
    float:right;

    width: var(--float-w);
    height: var(--float-h);

    background: var(--hero-image) center / contain no-repeat;

    margin: var(--float-gap) 0 var(--float-gap) var(--float-gap);
    transform: translate(var(--float-x), var(--float-y));

    pointer-events:none;
  }

  main::after{ content:""; display:block; clear:both; }
}

/* =========================
   CARD
   ========================= */

.card{
  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  box-shadow: 0 14px 32px var(--shadow-soft);
  padding: 24px 28px;
  overflow: visible;
}

@media (max-width: 560px){
  .card{
    padding: 18px 16px;
    border-radius: 18px;
  }
}