/* Art Corner — "Atelier Journal" gallery layout (index.html only).
   Palette sampled from the real logo: coral #E8875A, pink #E0399E, cyan #1FA5CC, blue #3D6FD1. */

@font-face {
  font-family: "Aref Ruqaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/aref-ruqaa-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Aref Ruqaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/aref-ruqaa-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

body.gallery {
  --g-coral: #E8875A;
  --g-pink: #E0399E;
  --g-pink-deep: #C42B86;
  --g-cyan: #1FA5CC;
  --g-blue: #3D6FD1;
  --g-ink: #221F1D;
  background: #FFFCFA;
}

/* ---------- header ---------- */
.gallery .hero {
  padding: 44px 24px 6px;
  max-width: 1100px;
}
.gallery .hero-logo {
  width: 130px;
  height: 130px;
  margin: 0 auto 6px;
  object-fit: contain;
}
.gallery .hero-eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--g-pink-deep);
  font-weight: 700;
  text-transform: uppercase;
}
.gallery .hero h1 {
  font-family: "Aref Ruqaa", "Cairo", serif;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 700;
  margin: 8px 0 10px;
  position: relative;
  display: inline-block;
  color: var(--g-ink);
  line-height: 1.5;
}
.gallery .hero h1::after {
  content: "";
  position: absolute;
  inset-inline: 4%;
  bottom: -2px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--g-blue), var(--g-cyan) 35%, var(--g-pink) 68%, var(--g-coral));
}
.gallery .hero p {
  max-width: 520px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.9;
  color: #5f5854;
}

.gallery .controls { padding-top: 34px; }

/* ---------- grid ---------- */
.gallery .grid {
  max-width: 1300px;
  grid-template-columns: minmax(0, 1fr); /* phones: one big photo per row */
  gap: 38px 24px;
  align-items: start;
  padding: 40px 24px 100px;
}
.gallery .grid:has(> .gcard:only-child) {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.gallery .grid .empty-state { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .gallery .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 52px; }
}

/* ---------- card (polaroid pinned with washi tape) ---------- */
.gcard {
  position: relative;
  background: #fffefd;
  padding: 10px 10px 16px;
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(34, 31, 29, 0.1), 0 1px 0 rgba(34, 31, 29, 0.05);
  transform: rotate(var(--tilt, -1.4deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (min-width: 640px) {
  .gcard { padding: 16px 16px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .gcard:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 18px 34px rgba(34, 31, 29, 0.16);
  }
}
.gcard:nth-child(3n+1) { --tilt: -2deg; }
.gcard:nth-child(3n+2) { --tilt: 1.6deg; }
.gcard:nth-child(3n+3) { --tilt: -0.8deg; }

.gcard .tape {
  position: absolute;
  top: -10px;
  inset-inline-end: 22px;
  width: 56px;
  height: 22px;
  opacity: 0.8;
  transform: rotate(-6deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.gcard:nth-child(4n+1) .tape { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--g-coral) 70%, white) 0 6px, color-mix(in srgb, var(--g-coral) 45%, white) 6px 12px); }
.gcard:nth-child(4n+2) .tape { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--g-pink) 70%, white) 0 6px, color-mix(in srgb, var(--g-pink) 45%, white) 6px 12px); }
.gcard:nth-child(4n+3) .tape { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--g-cyan) 70%, white) 0 6px, color-mix(in srgb, var(--g-cyan) 45%, white) 6px 12px); }
.gcard:nth-child(4n+4) .tape { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--g-blue) 70%, white) 0 6px, color-mix(in srgb, var(--g-blue) 45%, white) 6px 12px); }

.gcard .gphoto {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  background: #eee;
  cursor: zoom-in;
}
.gcard .gphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}
.gcard:hover .gphoto img { transform: none; }
.gcard .gphoto:focus-visible { outline: 2px solid var(--g-pink); outline-offset: 3px; }

.gcard .gbadge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  background: var(--g-pink-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}
.gcard .gbadge.sold { background: #4a4a4a; }

.gcard .gname {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--g-ink);
}
@media (min-width: 640px) { .gcard .gname { font-size: 14px; } }

.gcard .gprice {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gcard .gprice .old { font-size: 12px; color: #7a726d; text-decoration: line-through; }
.gcard .gprice .new { font-size: 17px; font-weight: 800; color: var(--g-pink-deep); }
@media (min-width: 640px) { .gcard .gprice .new { font-size: 19px; } .gcard .gprice .old { font-size: 13px; } }

.gcard .gask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0 0 2px;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--g-pink-deep);
  color: var(--g-pink-deep);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.gcard .gask:hover { color: #a8237a; border-color: #a8237a; }
.gcard .gask:focus-visible { outline: 2px solid var(--g-pink); outline-offset: 3px; }
.gcard .gask:disabled { color: #8a8480; border-color: #c9c3be; cursor: not-allowed; }

.gcard.sold-out .gphoto img { filter: grayscale(70%); opacity: 0.75; }

/* ---------- lightbox with name, price, ask button ---------- */
.gallery .lightbox-overlay { flex-direction: column; gap: 14px; }
.lightbox-info {
  display: none;
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px 16px;
  color: var(--g-ink, #221F1D);
}
.lightbox-overlay.open .lightbox-info { display: block; }
.lightbox-info .lname { font-size: 15px; font-weight: 700; line-height: 1.7; margin-bottom: 6px; }
.lightbox-info .gprice { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.lightbox-info .gprice .old { font-size: 13px; color: #7a726d; text-decoration: line-through; }
.lightbox-info .gprice .new { font-size: 20px; font-weight: 800; color: #C42B86; }
.lightbox-info .lask {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #C42B86;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.lightbox-info .lask:hover { background: #a8237a; }
.gallery .lightbox-overlay img { max-height: 62vh; }