/*
Theme Name: Polechoobi Hero
Theme URI: https://polechoobi.studio
Author: Polechoobi Studio
Description: Custom hero/header theme for Pol Choobi (splash gate + sticky header).
Version: 1.0
Text Domain: polechoobi-hero
*/

/* ==========================================================================
   Pol Choobi — Hero Section
   The photo was shot from farther back, so the arch is a small element in
   a large field of wall — that headroom is what lets us hit a DIFFERENT,
   deliberate arch-to-screen-width ratio at every device class (mobile
   arch reads big or bold; a 4K monitor arch stays modest) while still
   always fully covering the viewport (never a blank margin) and never
   cropping the arch itself.

   How it works: --target-w is "what fraction of the viewport width should
   the arch appear to be," set per breakpoint below. Dividing that by the
   arch's known fraction of the source photo (--arch-w-frac) tells us
   exactly how large to render the whole photo. The photo is then
   positioned so the arch lands at exactly 50% horizontal / 45% vertical
   of the hero, by construction (see the calc()s) — not by centering the
   photo itself. A max() floor guarantees the rendered photo can never be
   smaller than the viewport in either dimension, so there is never a
   margin, at any breakpoint or window shape.
   ========================================================================== */

@font-face {
  font-family: "IRANSansWebFaNum";
  src: url("fonts/IRANSansWeb_FaNum.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansWebFaNum";
  src: url("fonts/IRANSansWeb_FaNum_Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansWebFaNum";
  src: url("fonts/IRANSansWeb_FaNum_Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Scrollbar-corrected, AXIS-SAFE stand-in for "100vw". Plain 100vw
     includes the scrollbar (causes the classic vw-overflow bug); plain
     100% is scrollbar-safe but is a *percentage*, and percentages inside a
     custom property re-resolve against whatever axis the property that
     finally consumes them uses — so a width-based 100% silently becomes
     wrong the moment it's used to compute a `top`/`height`. --vw100 is a
     real px length (set by a few lines of JS, see index.html), so it means
     the same thing no matter where it ends up. The 100vw fallback here
     only matters before that JS runs on the very first paint. */
  --vw100: 100vw;

  --iw: 1536;
  --ih: 1024;
  --img-ratio: calc(var(--iw) / var(--ih));
  --wall-color: #d8bb7f;
  --wall-color-entered: #e4cfa5; /* one shade lighter than --wall-color, not near-white */
  --dark-text: #f1e6cf; /* "the background color" — used for text on the black art carousel */

  /* Arch position/size measured directly on hero.png, as a fraction (0–1)
     of the photo itself. */
  --arch-x-frac: 0.501;
  --arch-y-frac: 0.486;
  --arch-w-frac: 0.156;

  /* Desired arch width as a fraction of viewport width — default (mobile),
     overridden per breakpoint below. */
  --target-w: 0.64;

  /* Desired arch screen position: exactly centered horizontally, slightly
     above center vertically. Kept both as plain fractions (for the floor
     math below) and as length values (for the actual positioning). */
  --anchor-x: 0.5;
  --anchor-y: 0.45;
  --arch-screen-x: calc(var(--vw100) / 2);
  --arch-screen-y: 45vh;

  --logo-fade-duration: 3s;
  --logo-fade-delay: .6s;

  /* Progress bar starts filling exactly when the logo starts fading in,
     and keeps going until 3s after the logo's fade-in finishes:
     total = logo-fade-delay + logo-fade-duration + 3s. */
  --progress-delay: var(--logo-fade-delay);
  --progress-duration: calc(var(--logo-fade-duration) + 3s);

  --accent: #03515e; /* sampled from the dot in the logo mark — the progress bar's color */
  --ink: #000; /* all header/nav text and icons: full black, per brief */
  --enter-y-offset: 0.10;   /* progress bar sits inside the arch, above the shelf */
  --enter-fade-delay: 1.2s;
  /* The logo artwork isn't visually centered in its own transparent canvas
     (measured: ink spans 47.85% of the box width, centered on it) — so
     lining the button up with the box's geometric center missed the mark's
     actual visual center by ~2%. This shifts it to match, X-only. */
  --logo-visual-x-offset: -0.0215;

  --header-margin: 20px;
  --enter-duration: 1.3s;
  --logo-move-duration: 2.2s; /* slower than the rest of the enter transition, deliberately calmer */
  --content-max: 1280px; /* "standard page width" the search box stretches to */
  --header-logo-w: 100px; /* logo's own width — sized independently of the header bar now */
  --header-bar-h: 95px; /* fixed (half the original) — decoupled from --header-logo-w on purpose */
  /* Where the content-max-constrained content starts, measured from the
     true viewport edge. .header-row reaches this same point automatically
     via max-width + margin-inline:auto + padding-inline — this explicit
     copy is only needed for the animated logo, which moves via left/top
     (not flex) so it has no container to inherit the boundary from. */
  --content-edge: max(var(--header-margin), calc((var(--vw100) - var(--content-max)) / 2 + var(--header-margin)));

  /* ---- Derived render size: the larger of "hit the target arch size" and
     "cover the viewport completely at this specific off-center anchor."
     A plain center-based cover floor (max(100%, 100vh*ratio)) isn't quite
     enough here because the photo isn't centered — it's anchored to the
     arch's position (50%/45%), so each edge needs its own floor. ---- */
  --floor-h: max(
    calc(var(--anchor-y) / var(--arch-y-frac) * 100vh),
    calc((1 - var(--anchor-y)) / (1 - var(--arch-y-frac)) * 100vh)
  );
  --floor-w: max(
    calc(var(--anchor-x) / var(--arch-x-frac) * var(--vw100)),
    calc((1 - var(--anchor-x)) / (1 - var(--arch-x-frac)) * var(--vw100)),
    calc(var(--floor-h) * var(--img-ratio))
  );
  --render-w-target: calc(var(--target-w) / var(--arch-w-frac) * var(--vw100));
  --render-w: max(var(--render-w-target), var(--floor-w));
  --render-h: calc(var(--render-w) / var(--img-ratio));

  --img-left: calc(var(--arch-screen-x) - var(--arch-x-frac) * var(--render-w));
  --img-top: calc(var(--arch-screen-y) - var(--arch-y-frac) * var(--render-h));

  /* Logo size follows the same responsive rule at every breakpoint (70% of
     the arch's width). The header mark, after "ورود" is clicked, is ~80%
     of THAT size — clamped so it stays comfortably readable in a header
     at any screen size instead of literally scaling with the hero arch. */
  --logo-hero-w: clamp(90px, calc(var(--arch-w-frac) * 0.7 * var(--render-w)), 420px);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --target-w: 0.46; }
}
/* Laptop */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { --target-w: 0.31; }
}
/* 27" monitor */
@media (min-width: 1440px) and (max-width: 2559px) {
  :root { --target-w: 0.27; }
}
/* 32" / 4K monitor */
@media (min-width: 2560px) {
  :root { --target-w: 0.23; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

/* Matches the collapsed header's own background so any sub-pixel rounding
   gap between the sticky header and the content below it shows this color
   instead of the browser's default white canvas. */
body.is-entering {
  background-color: var(--wall-color-entered);
}

/* .hero is the entry gate (wall + arch + "ورود"). It is NOT the site's own
   Hero Section — it's a one-time splash. Once entered, it collapses down
   to just a slim sticky header bar (logo + nav + search live in it) and
   the real site content (currently: the two carousels below) takes over
   the rest of the page in normal, scrollable flow. */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--wall-color);
  transition: background-color calc(var(--enter-duration) * 1.4) ease,
    height var(--enter-duration) ease;
}

.hero.is-entering {
  height: var(--header-bar-h);
  background-color: var(--wall-color-entered);
  position: sticky;
  top: 0;
  z-index: 20;
}

.hero .wall {
  position: absolute;
  left: var(--img-left);
  top: var(--img-top);
  width: var(--render-w);
  height: var(--render-h);
  display: block;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--enter-duration) ease;
}

/* Logo stays at its original, unmodified responsive position/size — always
   dead-center on the arch — both before and while "ورود" is visible.
   Deliberately NO transition here: left/top/width are recalculated on every
   resize (that's the responsive behavior), and transitioning THOSE would
   make the logo visibly "jump and settle" on every resize tick instead of
   tracking the viewport instantly. The transition is added back only in
   .is-entering below, where a move really is a deliberate animation. */
.hero .logo-wrap {
  position: absolute;
  left: var(--arch-screen-x);
  top: var(--arch-screen-y);
  width: var(--logo-hero-w);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.hero .logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  opacity: 0;
  animation: logoFade var(--logo-fade-duration) ease-in forwards;
  animation-delay: var(--logo-fade-delay);
}

@keyframes logoFade {
  from { opacity: 0; transform: translateY(4%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Auto-entry progress bar — replaces the old "ورود" button. It starts
   filling (right-to-left, RTL) the instant the logo starts fading in, and
   keeps filling until 3s after the logo's fade-in finishes. When it
   completes, JS triggers the exact same is-entering transition a click
   used to trigger. Centered on the arch itself (--arch-screen-x) — NOT
   shifted by --logo-visual-x-offset, which only corrected for the logo
   artwork's own off-center ink and doesn't apply to a plain bar.
   width matches --logo-hero-w exactly (same variable .logo-wrap uses) so
   that, combined with the identical left+transform centering, both the
   left AND right edges coincide with the logo's edges — not just the center. */
.hero .progress-wrap {
  position: absolute;
  left: var(--arch-screen-x);
  top: calc(var(--arch-screen-y) + var(--enter-y-offset) * var(--render-h));
  transform: translateX(-50%);
  width: var(--logo-hero-w);
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  /* Its own opacity-only keyframes — NOT logoFade, which also animates
     `transform` and would clobber the static translateX(-50%) centering
     below the instant the animation starts (animated `transform` fully
     replaces the static value, it doesn't merge with it). */
  animation: barFadeIn 1s ease-out forwards;
  animation-delay: var(--enter-fade-delay);
  transition: opacity .5s ease;
}

@keyframes barFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero .progress-fill {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  animation: progressFill var(--progress-duration) linear forwards;
  animation-delay: var(--progress-delay);
}

@keyframes progressFill {
  from { width: 0%; }
  to   { width: 100%; }
}

.hero.is-entering .progress-wrap {
  opacity: 0;
  pointer-events: none;
}

/* Shared by any "enter/login" icon (nav item, mobile bar) so they all
   point the same direction. */
.hero .icon-flip {
  transform: scaleX(-1);
}

/* ---- Click "ورود": wall fades out, logo shrinks into a header mark ---- */
.hero.is-entering .wall {
  opacity: 0;
}

.hero.is-entering .enter-link {
  /* animation:none cancels the forwards-filled logoFade keyframe animation —
     otherwise its held opacity:1 end-state wins over this plain opacity:0
     (CSS animations take priority over normal declarations in the cascade),
     and the button would never actually fade out. */
  animation: none;
  opacity: 0;
  pointer-events: none;
}

.hero.is-entering .logo-wrap {
  left: calc(var(--vw100) - var(--content-edge) - var(--header-logo-w) / 2);
  /* Dead-center of the header bar itself — NOT header-margin + logo-w/2,
     which only worked back when header-bar-h was defined AS margin*2+logo-w.
     Now that the bar height is fixed independently of the logo's own size,
     this is what keeps the logo vertically centered (and unclipped) no
     matter how header-logo-w and header-bar-h relate to each other. */
  top: calc(var(--header-bar-h) / 2);
  width: var(--header-logo-w);
  transform: translate(-50%, -50%);
  transition: left var(--logo-move-duration) ease, top var(--logo-move-duration) ease,
    width var(--logo-move-duration) ease, transform var(--logo-move-duration) ease;
}

/* ==========================================================================
   Header row — a real flex row inside a standard max-width/auto-margin/
   padding container (no margin-left/right or transform centering tricks).
   .header-logo-slot is an invisible spacer the exact size of the header
   logo; the REAL logo is a separate, absolutely-positioned element that
   flies in on top of it (that part legitimately needs position+transform,
   since it's animating between two totally different layout contexts —
   centered-on-the-arch and sitting-in-the-header). Reserving its space
   with a plain flex item is what keeps the nav/search symmetric: both
   sides of this row are governed by the SAME padding-inline value.
   ========================================================================== */
.hero .header-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--header-margin);
  box-sizing: border-box;
  direction: rtl;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease .9s;
}

.hero.is-entering .header-row {
  opacity: 1;
  pointer-events: auto;
}

.hero .header-logo-slot {
  flex: 0 0 var(--header-logo-w);
  width: var(--header-logo-w);
  height: var(--header-logo-w);
}

.hero .site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 auto;
  min-width: 0;
}

.hero .nav-item {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  flex-shrink: 0;
  color: var(--ink);
  text-decoration: none;
  font-family: "IRANSansWebFaNum", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}

.hero .nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}

.hero .nav-search {
  display: flex;
  align-items: center;
  gap: .5em;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
}

.hero .nav-search svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}

.hero .nav-search span {
  font-family: "IRANSansWebFaNum", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}

.hero .nav-search input {
  flex: 1 1 auto;
  min-width: 60px;
  height: 34px;
  border: 0;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.35);
  background: transparent;
  font-family: "IRANSansWebFaNum", Tahoma, sans-serif;
  font-size: 13px;
  color: var(--ink);
  padding: 0 4px;
  outline: none;
}
.hero .nav-search input::placeholder { color: rgba(0, 0, 0, 0.45); }
.hero .nav-search input:focus { border-bottom-color: var(--ink); }

@media (max-width: 640px) {
  .hero .header-row { display: none; }
}

/* ==========================================================================
   Mobile header row (≤640px) — same pattern as the desktop header-row: a
   real flex row (justify-content: space-between) in a padding-inline
   container, with a logo-slot spacer on the side the real logo lands on.
   Tapping search turns the row into a search field with the logo hopping
   to the other side and filter/cancel appearing opposite it.
   ========================================================================== */
.hero .mobile-header-row {
  display: none;
}

@media (max-width: 640px) {
  .hero .mobile-header-row {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--header-margin);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease .9s;
  }

  .hero.is-entering .mobile-header-row {
    opacity: 1;
    pointer-events: auto;
  }
}

.hero .mobile-logo-slot {
  flex: 0 0 var(--header-logo-w);
  height: 100%; /* fills mobile-header-row, which itself fills the header bar */
}

.hero .mobile-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  direction: ltr;
}

.hero .mobile-bar button {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hero .mobile-bar svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  flex-shrink: 0;
}

.hero .mobile-search-bar {
  display: none;
  position: absolute;
  top: var(--header-margin);
  right: var(--header-margin);
  left: calc(var(--header-margin) * 2 + var(--header-logo-w) + 12px);
  height: calc(var(--header-bar-h) - var(--header-margin) * 2);
  align-items: center;
  gap: 12px;
  direction: rtl;
}

.hero.search-open .mobile-bar > button:not(.mobile-search-toggle),
.hero.search-open .mobile-bar > a {
  display: none;
}
.hero.search-open .mobile-search-toggle {
  display: none;
}
.hero.search-open .mobile-search-bar {
  display: flex;
}
.hero.search-open .logo-wrap {
  left: calc(var(--header-margin) + var(--header-logo-w) / 2);
  transition: left var(--logo-move-duration) ease, top var(--logo-move-duration) ease,
    width var(--logo-move-duration) ease, transform var(--logo-move-duration) ease;
}

.hero .mobile-search-bar input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  border: 0;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.35);
  background: transparent;
  font-family: "IRANSansWebFaNum", Tahoma, sans-serif;
  font-size: 13px;
  color: var(--ink);
  padding: 0 4px;
  outline: none;
}
.hero .mobile-search-bar input::placeholder { color: rgba(0, 0, 0, 0.45); }

/* ---- Hamburger dropdown: the 6 items, stacked ---- */
.hero .mobile-menu-panel {
  display: none;
  position: absolute;
  top: calc(var(--header-bar-h) + 10px);
  left: var(--header-margin);
  right: var(--header-margin);
  max-width: 320px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 8px;
  flex-direction: column;
  gap: 2px;
  direction: rtl;
}

.hero.menu-open .mobile-menu-panel {
  display: flex;
}

.hero .mobile-menu-panel a {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-family: "IRANSansWebFaNum", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 14px;
}
.hero .mobile-menu-panel a:hover { background: rgba(0, 0, 0, 0.05); }
.hero .mobile-menu-panel a svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* ==========================================================================
   Site content — the real site, below the sticky header. Sits in normal
   document flow (this is what makes the page scrollable at all), hidden
   until "ورود" is clicked.

   NOTE for implementation later: every card below (events, artworks) is
   static placeholder markup for this visual prototype. In the real build
   these lists come from the admin/CMS (per the project brief: nothing here
   should end up hardcoded — staff need an admin screen to add/edit/remove
   events and artworks, prices, images, etc.).
   ========================================================================== */
.site-content {
  display: none;
  direction: rtl;
  font-family: "IRANSansWebFaNum", Tahoma, sans-serif;
}

body.is-entering .site-content {
  display: block;
}

.carousel-section {
  padding: 40px 0 48px;
}

.carousel-section--light {
  background: var(--wall-color-entered);
  padding-top: 16px; /* pulled the events box up closer to the header */
}

.carousel-section--dark {
  background: #000;
}

.carousel-header,
.carousel-track {
  max-width: var(--content-max);
  margin-inline: auto;
  box-sizing: border-box;
}

.carousel-header {
  /* Flat header-margin — NOT the old max()/50% formula, which resolved
     against the wrong containing block and drifted away from the header
     row's logo edge on wide viewports. This matches header-row's own
     padding-inline exactly, so the heading and the logo always share the
     same right edge. */
  padding-inline: var(--header-margin);
}

/* .carousel-track deliberately does NOT use padding OR margin-on-first-child
   for its side gutter — in an RTL + overflow:auto flex row, Chrome clamps
   the initial scroll position past both (a known cross-browser quirk), so
   the gutter silently disappears at rest. Real flex-item spacers don't have
   that problem — they're part of scrollWidth like any other card. */
.carousel-track::before,
.carousel-track::after {
  content: "";
  flex: 0 0 var(--header-margin);
}

.carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px; /* EXPERIMENTAL: pulled up further since the box grew taller */
}

.carousel-header h2 {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  color: var(--ink);
}

.carousel-section--dark .carousel-header h2 {
  color: var(--dark-text);
}

.view-all {
  background: none;
  border: none;
  padding: 6px 2px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s ease;
}

.carousel-section--dark .view-all {
  color: var(--dark-text);
}

.view-all:hover {
  color: var(--accent);
}

.carousel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* ---- Event cards (pearl-white) ---- */
.event-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 260px;
  background: #faf9f6; /* پرل/سفید مروارید */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.event-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.event-card__body {
  padding: 14px 16px 18px;
}

.event-card__subject {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.event-card__meta {
  margin: 0 0 2px;
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.62);
}

.event-card__price {
  margin: 2px 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-actions button,
.card-actions a {
  flex: 1 1 0;
  text-align: center;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 6px;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  transition: background .2s ease, color .2s ease;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: #fff;
}

/* ---- Art cards (on the black section) ---- */
.art-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 240px;
  background: #141414;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.art-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.art-card__body {
  padding: 14px 16px 18px;
}

.art-card__title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark-text);
}

.art-card__artist {
  margin: 0 0 2px;
  font-size: 12px;
  color: rgba(241, 230, 207, 0.65);
}

.art-card__price {
  margin: 2px 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-text);
}

.art-card .card-actions button,
.art-card .card-actions a {
  border-color: var(--dark-text);
}

.art-card .btn-primary {
  background: var(--dark-text);
  color: #000;
}
.art-card .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.art-card .btn-secondary {
  color: var(--dark-text);
}
.art-card .btn-secondary:hover {
  background: var(--dark-text);
  color: #000;
}

/* Artwork placeholder tiles (no real photos yet) — soft tonal gradients
   standing in for photography, swap for real <img src> later. */
.art-card .art-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
}
.art-placeholder--1 { background: linear-gradient(135deg, #3a2f28, #7a5a3a); }
.art-placeholder--2 { background: linear-gradient(135deg, #1f2d2b, #3f6e63); }
.art-placeholder--3 { background: linear-gradient(135deg, #2c2418, #a9772f); }
.art-placeholder--4 { background: linear-gradient(135deg, #241f2e, #5b4b8a); }
.art-placeholder--5 { background: linear-gradient(135deg, #2a1e1e, #8a3f3f); }

/* ==========================================================================
   Events card — "رویدادهای پیش‌رو". Photo on top (full card width), then
   an info bar: title+description (right) | 6-stat single-row grid
   (middle) | رزرو/مشاهده رویداد buttons (left). At tablet the stat grid
   becomes 3x2; at mobile the whole bar restructures into a vertical
   stack with a 2x3 stat grid and side-by-side buttons. See the media
   queries below for the full per-breakpoint behavior.

   NOTE for the next phase: event data here is still static placeholder
   markup/JS. It's meant to be replaced by data pulled from the upcoming
   "رزرو فضا" (Space Reservation) admin section — and only events with
   that section's "نمایش در سایت" (show on site) checkbox enabled should
   render here. ---- */
:root {
  --event-card-h: 480px; /* fixed, eye-catching feature-card size */
  --logo-ink: #5c0a02; /* sampled from the logo wordmark itself (not the accent dot) */
  --logo-ink-faint: rgba(92, 10, 2, 0.22); /* same color, low opacity, for the stat dividers */
  /* Measured in-browser from the tallest column at each tier (buttons,
     once the stat icon moved beside its label instead of above it) —
     re-measure before hand-tuning this. */
  --event-info-box-h: 92px;
}

/* Same flat header-margin padding as .header-row/.carousel-header — this
   guarantees the card's right edge lands exactly under the logo's own
   right edge (both the heading above it AND this box share that edge). */
.event-carousel-wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--header-margin);
  box-sizing: border-box;
}

/* EXPERIMENTAL layout (user asked to try this; revert to the previous
   two-halves version if it doesn't work out — that version is preserved
   verbatim as style34.css / splash-intro-v42.html). Photo now spans the
   full card width at the card's old height; a new full-width info bar
   sits below it, split into three columns: title+description (right),
   the stat grid (middle, same styling as before), stacked buttons (left). */
.event-carousel {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.event-photo-box {
  position: relative; /* nav buttons anchor to this box */
  height: var(--event-card-h);
  overflow: hidden;
}

.event-bg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  border: none;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: background 0.2s ease;
}
.event-nav-btn:hover { background: #fff; }
.event-nav-btn svg { width: 17px; height: 17px; stroke: var(--ink); }
.event-nav-btn--prev { right: 16px; }
.event-nav-btn--next { left: 16px; }

/* Info bar: full card width, below the photo. Three columns via a normal
   RTL flex row — first child sits rightmost. Height is FIXED (measured
   from a single stat item: icon-top to value-bottom, plus a bit) — see
   --event-info-box-h below. Everything else is sized to fit inside that,
   not the other way around. */
.event-info-box {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  height: var(--event-info-box-h);
  box-sizing: border-box;
  background: #faf9f6;
  padding: 14px 28px;
  overflow: hidden;
  font-family: "IRANSansWebFaNum", Tahoma, sans-serif;
}

/* Right column: title + description, both capped to a single line each —
   so a long description can never grow the box; it just truncates. */
.event-info-text {
  flex: 0 0 34%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.event-info-title {
  margin: 0;
  text-align: right;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--logo-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-info-desc {
  margin: 0;
  text-align: right;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Middle column: all 6 stats in a single line, equal width, dividers
   between each. This single row's own height is the box's height anchor. */
.event-stats {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
}

.event-stat {
  /* Equal width by default — location (last item) gets extra flex-grow
     below since its value ("استودیو پل چوبی") is the longest and was
     clipping at some widths under strict equal division. */
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding-inline: 6px;
  min-width: 0;
}
.event-stat:first-child { padding-inline-end: 0; }
.event-stat:not(:first-child) {
  border-inline-start: 1px solid var(--logo-ink-faint);
}
/* مکان — last item, needs more room than the others for its longer value */
.event-stat:last-child {
  flex: 1.6 1 0;
}

/* Icon sits beside the LABEL (not above it) — one row instead of two,
   shorter overall item height. */
.event-stat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.event-stat-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-stat-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--logo-ink);
  opacity: 0.85;
}

.event-stat-label {
  font-size: 9.5px;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.event-stat-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Left column: two pills, رزرو on top — both exactly the same size,
   centered as a group in the column's height (not stretched apart). */
.event-info-actions {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.event-info-actions a {
  width: 88px;
  text-align: center;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 6px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* رزرو — the accent teal, sampled from the bottom-right dot under the logo */
.event-info-actions .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.event-info-actions .btn-primary:hover { background: #023f49; border-color: #023f49; }
/* مشاهده رویداد — the logo's own maroon ink color */
.event-info-actions .btn-secondary {
  background: transparent;
  border-color: var(--logo-ink);
  color: var(--logo-ink);
}
.event-info-actions .btn-secondary:hover { background: var(--logo-ink); color: #fff; }

/* ---- Narrow laptop (1024-1279px, e.g. Nest Hub at 1024x600): the base
   sizing below was tuned for 1280px+ and felt cramped at the tight end of
   the laptop range, close to wrapping. Same 3-column structure, sizes
   scaled down proportionally so the side gaps read as comfortable again. ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .event-info-box { gap: 16px; padding: 12px 20px; }
  .event-info-title { font-size: 13px; }
  .event-info-desc { font-size: 10.5px; }
  .event-stat-label { font-size: 8.5px; }
  .event-stat-value { font-size: 10px; }
  .event-info-actions a { width: 76px; font-size: 9.5px; padding: 4px 6px; }
}

/* ---- Tablet (768-1023px): same 3-column bar as laptop/desktop — only
   the stat grid changes, from one row of 6 to 3 columns x 2 rows. Height
   is no longer fixed (that was calibrated for a single row); it grows to
   fit the now-taller stat grid instead. ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --event-card-h: 300px; }

  .event-info-box { height: auto; }

  .event-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 4px;
  }
  .event-stat {
    padding-inline: 6px;
  }
  .event-stat:not(:nth-child(3n + 1)) {
    border-inline-start: 1px solid var(--logo-ink-faint);
  }
  .event-stat:nth-child(n + 4) {
    border-block-start: 1px solid var(--logo-ink-faint);
    padding-top: 10px;
  }
}

/* ---- Mobile (<=767px): the 3-column bar restructures to a vertical
   stack — title, then description (right-aligned, not justified), then
   a 2x3 stat grid, then the two buttons side by side (equal width,
   standard gap) — per explicit request for this breakpoint only. ---- */
@media (max-width: 767px) {
  :root { --event-card-h: 170px; }

  /* Extra headroom against real mobile Safari/Chrome chrome (address bar,
     etc.) eating into the visual viewport — a raw device-height number
     like iPhone SE's 667px is rarely all usable in practice. */
  .carousel-section--light { padding-top: 8px; }
  .carousel-header { margin-bottom: 2px; }

  .event-info-box {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 10px;
    padding: 14px 16px;
  }

  .event-info-text {
    flex: 0 0 auto;
  }
  .event-info-desc {
    text-align: right; /* not justified, per this breakpoint's spec */
  }

  .event-stats {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 4px;
  }
  .event-stat {
    padding-inline: 6px;
  }
  .event-stat:not(:nth-child(2n + 1)) {
    border-inline-start: 1px solid var(--logo-ink-faint);
  }
  .event-stat:nth-child(n + 3) {
    border-block-start: 1px solid var(--logo-ink-faint);
    padding-top: 10px;
  }

  /* Buttons: side by side, equal size, standard gap — not stacked. */
  .event-info-actions {
    flex: 0 0 auto;
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
  .event-info-actions a {
    flex: 1 1 0;
    width: auto;
  }
}

/* ==========================================================================
   Generic WordPress Page template (page.php) — a minimal, self-contained
   layout for plain content pages (e.g. the standalone "رزرو فضا" page).
   Deliberately isolated from the homepage's hero/header CSS: new class
   names only, nothing shared, so this can never regress the homepage. ---- */
body.pcsr-page {
  margin: 0;
  font-family: "IRANSansWebFaNum", Tahoma, sans-serif;
  color: var(--ink);
  background: var(--wall-color-entered);
}

.pcsr-page-header {
  padding: var(--header-margin);
  display: flex;
  justify-content: center;
}

.pcsr-page-logo {
  height: 40px;
  width: auto;
  display: block;
}

.pcsr-page-content {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--header-margin);
  padding-bottom: 60px;
}

.pcsr-page-title {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--logo-ink);
  margin: 8px 0 20px;
}

/* ==========================================================================
   Homepage quick-access CTA boxes (reservation / spaces / gallery-collab /
   artworks), placed between the events carousel and the wizard section. ---- */
.pcsr-cta-section {
  padding-top: 8px;
}

.pcsr-cta-grid {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--header-margin);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pcsr-cta-box {
  aspect-ratio: 1 / 1;
  background: #faf9f6;
  border-radius: 14px;
  box-sizing: border-box;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pcsr-cta-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.pcsr-cta-icon {
  width: clamp(30px, 3vw, 40px);
  height: clamp(30px, 3vw, 40px);
  color: var(--logo-ink);
  margin-bottom: auto;
}

.pcsr-cta-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.pcsr-cta-text {
  width: 100%;
  text-align: right;
}

.pcsr-cta-title {
  margin: 0 0 4px;
  font-size: clamp(13.5px, 1.3vw, 16px);
  font-weight: 700;
  color: #1a1a1a;
}

.pcsr-cta-action {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 767px) {
  .pcsr-cta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pcsr-cta-box {
    padding: 14px;
    border-radius: 12px;
  }
}

.pcsr-cta-box--reservation { background: #57130a; }
.pcsr-cta-box--artworks { background: #11464e; }
.pcsr-cta-box--collab { background: #161615; }

.pcsr-cta-box--reservation .pcsr-cta-icon,
.pcsr-cta-box--artworks .pcsr-cta-icon,
.pcsr-cta-box--collab .pcsr-cta-icon {
  color: #fff;
}

.pcsr-cta-box--reservation .pcsr-cta-title,
.pcsr-cta-box--artworks .pcsr-cta-title,
.pcsr-cta-box--collab .pcsr-cta-title {
  color: #fff;
}

.pcsr-cta-box--reservation .pcsr-cta-action,
.pcsr-cta-box--artworks .pcsr-cta-action,
.pcsr-cta-box--collab .pcsr-cta-action {
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   Plain content-page body text (درخواست همکاری در گالری, etc.) ---- */
.pcsr-page-body p {
  line-height: 1.9;
  margin: 0 0 16px;
}

/* ==========================================================================
   Spaces intro page (معرفی فضاها) ---- */
.pcsr-spaces-empty {
  color: rgba(0, 0, 0, 0.6);
}

.pcsr-spaces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pcsr-space-card {
  background: #faf9f6;
  border-radius: 14px;
  overflow: hidden;
}

.pcsr-space-card-photo {
  aspect-ratio: 4 / 3;
  background: var(--wall-color-entered);
  overflow: hidden;
}

.pcsr-space-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pcsr-space-card-body {
  padding: 14px 18px 18px;
}

.pcsr-space-card-name {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--logo-ink);
}

.pcsr-space-card-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.75);
}

.pcsr-space-card-specs span {
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 1023px) {
  .pcsr-spaces-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pcsr-spaces-grid {
    grid-template-columns: 1fr;
  }
}