/* ==========================================================================
   ATIYEH JOURNAL — its own deep-forest editorial atmosphere, with a card
   motif that has nothing in common with the full-bleed image-overlay
   cards used everywhere else on the homepage: a tilted photo-print
   ("polaroid"), thick cream border, caption written directly on the
   paper instead of over the image, a tiny pin dot, and a slight hand-
   placed rotation per card. Compact fixed height keeps head + all three
   prints inside one self-contained view.
   ========================================================================== */
.journal-section{
  width: 100%;
  padding: clamp(40px, 4.5vw, 52px) var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: linear-gradient(165deg, #16241F 0%, #1B2E27 46%, #14211C 100%);
  border-top: 1px solid rgba(200,168,107,0.14);
  border-bottom: 1px solid rgba(200,168,107,0.1);
}
.journal-section::before{
  content: "";
  position: absolute;
  top: 8%;
  inset-inline-end: 6%;
  width: 40%;
  height: 60%;
  background: rgba(200,168,107,0.14);
  filter: blur(150px);
  opacity: .7;
  pointer-events: none;
  z-index: 0;
}
.journal-section::after{
  content: "";
  position: absolute;
  bottom: 5%;
  inset-inline-start: 4%;
  width: 26%;
  height: 46%;
  background: rgba(143,191,168,0.08);
  filter: blur(120px);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}

.journal-section .section-head{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(22px, 2.8vw, 30px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.journal-section h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--text-5), 3.2vw, 44px);
  color: var(--ivory);
}
.journal-section .section-subtitle{
  font-size: var(--text-1);
  color: rgba(247,242,231,.68);
}

/* ---- Magazine grid: 1 featured (left, full height) + 2 stacked small.
   Fixed, deliberately tight height keeps the whole section — head +
   every print — inside one self-contained view. ---- */
.journal-grid{
  position: relative;
  z-index: 1;
  display: grid;
  /* One single row of 3 cards — not 1 large + 2 stacked. Stacking two
     full polaroids (photo + caption each) inside half the grid's own
     height was the previous bug: the caption's content alone needed
     more room than a half-share of a "compact" height had to give,
     leaving the photo just a sliver. All three cards sharing the same
     full row height is what actually keeps every photo readable AND
     the section compact.
     minmax(0, ...) not bare fr — "1fr" alone implies minmax(auto, 1fr),
     and "auto" won't shrink a track below its content's min-content
     width (the long Persian headline was holding columns open past the
     viewport at narrow sizes). */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  height: clamp(360px, 30vw, 420px);
  padding-block: var(--sp-2); /* room for the tilt + hover lift to breathe */
}
.journal-card{ min-width: 0; }

.journal-more-wrap{ text-align: center; margin-top: clamp(24px, 3vw, 36px); }
.journal-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid rgba(216,194,149,.4);
  border-radius: 999px;
  color: rgba(247,242,231,.9);
  font-size: var(--text-1);
  text-decoration: none;
  transition: background 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease);
}
.journal-more:hover{
  background: rgba(216,194,149,.12);
  border-color: rgba(216,194,149,.7);
  color: var(--ivory);
}
.journal-more span{ transition: transform 400ms var(--ease); }
.journal-more:hover span{ transform: translateX(-4px); }

/* ---------------------------------------------------------------------- */
/* Polaroid card — thick paper border, photo inset, caption on the paper  */
/* ---------------------------------------------------------------------- */
.journal-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FBF8F2;
  border-radius: 6px;
  padding: 10px 10px 0;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.12),
    0 18px 30px -14px rgba(0,0,0,0.45),
    0 40px 60px -28px rgba(0,0,0,0.4);
  transform: rotate(var(--tilt, -2deg));
  transition: transform 550ms var(--ease), box-shadow 550ms var(--ease);
}
.journal-grid .journal-card:nth-child(1){ --tilt: -2deg; }
.journal-grid .journal-card:nth-child(2){ --tilt: 1.6deg; }
.journal-grid .journal-card:nth-child(3){ --tilt: -1.4deg; }

.journal-card:hover{
  transform: rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.14),
    0 26px 42px -16px rgba(0,0,0,0.5),
    0 52px 84px -30px rgba(0,0,0,0.46);
  z-index: 2;
}

.polaroid-photo{
  position: relative;
  flex: 1 1 auto;
  /* min-height:0 here on purpose: the desktop .journal-grid has a real
     fixed height (see above), so flex:1 alone correctly fills whatever
     space is left after the caption — no floor needed, and adding one
     would force this card taller than the grid's own height, blowing
     the whole section past its compact budget. The responsive rules
     below re-introduce a min-height ONLY where the card falls back to
     height:auto (its content there has no fixed height to fill against,
     so the <img>'s position:absolute — zero intrinsic height — would
     otherwise let this collapse to nothing). */
  min-height: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #0e0d0b;
}
.polaroid-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(.94) sepia(.05);
  transition: transform 650ms var(--ease), filter 650ms var(--ease);
}
.journal-card:hover .polaroid-photo img{ transform: scale(1.07); filter: saturate(1) sepia(0); }

/* A tiny brass pin — the "pinned to the board" detail */
.polaroid-pin{
  position: absolute;
  top: 10px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F3E3B8, #C8A86B 65%, #9c7f4d 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  z-index: 2;
}

.polaroid-caption{
  flex: 0 0 auto;
  padding: var(--sp-2) 6px var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.polaroid-text{ display: flex; flex-direction: column; gap: 3px; }
.journal-category{
  font-family: var(--font-latin);
  font-style: italic;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--bronze);
}
.journal-card h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2);
  line-height: 1.35;
  color: var(--ink);
}
.journal-featured h3{ font-size: var(--text-3); }

.polaroid-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.journal-read-time{ font-size: 11px; color: var(--bronze); }

.journal-arrow{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(24,60,54,.25);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 500ms var(--ease), color 500ms var(--ease), border-color 500ms var(--ease);
}
.journal-arrow svg{ width: 13px; height: 13px; }
.journal-card:hover .journal-arrow{
  transform: translate(-4px, -4px); /* RTL: forward = up-left */
  color: var(--gold);
  border-color: rgba(200,168,107,.5);
}

.journal-card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce){
  .journal-card, .polaroid-photo img, .journal-arrow{ transition-duration: .01ms !important; }
  .journal-card:hover{ transform: rotate(var(--tilt, 0deg)); }
}

/* ---- Responsive ----
   Below desktop, cards fall back to height:auto (an explicit fixed grid
   row stops making sense once cards wrap to multiple rows), so flex:1
   on .polaroid-photo has nothing definite to fill against — the
   min-height floor (see .polaroid-photo's base comment) comes back at
   these breakpoints for exactly that reason. ---- */
@media (max-width: 1080px){
  .journal-grid{ height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .journal-featured{ grid-column: 1 / 3; aspect-ratio: 16/10; height: auto; }
  .journal-card:not(.journal-featured){ aspect-ratio: 3/4; height: auto; }
  .polaroid-photo{ min-height: 160px; }
  .journal-featured .polaroid-photo{ min-height: 200px; }
}

@media (max-width: 640px){
  .journal-section{ padding: clamp(36px, 7vw, 48px) var(--sp-4); }
  .journal-grid{ grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .journal-featured{ grid-column: 1; aspect-ratio: 4/3; }
  .journal-card:not(.journal-featured){ grid-column: 1; aspect-ratio: 16/9; }
  .polaroid-photo{ min-height: 140px; }
  .journal-featured .polaroid-photo{ min-height: 160px; }
  .journal-card{ transform: rotate(0deg) !important; }
  .journal-card:hover{ transform: translateY(-4px) !important; }
}