/* ============================================================================
 *  3D Gifts — СТИЛОВЕ ЗА ДОПЪЛНИТЕЛНИТЕ ПРОДУКТИ
 * ----------------------------------------------------------------------------
 *  Ползва се от cards.html, portraits.html и puzzles.html, а началната
 *  страница го зарежда заради секцията с трите продукта.
 * ==========================================================================*/

/* Gallery Grid */
  /* Row combinations that must fit: 4 portrait, or 1 landscape + 2 portrait,
     or 2 landscape. Four portraits are the tightest case, so the portrait width
     is exactly a quarter of the row; a landscape card is 16/9 of that, which
     lands on the same height and leaves the other two combinations room. */
  .gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-top: 48px;
    --gap: 20px;
    --cols: 4;
    --pw: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    gap: var(--gap);
  }
  .gallery-grid .flip-card {
    width: var(--pw);
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .gallery-grid .flip-card.is-landscape {
    width: calc(var(--pw) * 16 / 9);
    aspect-ratio: 4 / 3;
  }
  @media (max-width: 1000px) { .gallery-grid { --cols: 3; } }
  @media (max-width: 760px)  { .gallery-grid { --cols: 2; --gap: 16px; } }

  .flip-card{
    position:relative; width:100%; aspect-ratio:3/4;
    border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line);
    box-shadow:0 40px 80px -40px var(--shadow); cursor:pointer;
    background:var(--surface);
  }
  /* 2D flip. A flattened rotateY is the same matrix as scaleX(-1), so the
     rotation is written directly as a mirror: no transform-style, no
     backface-visibility, no perspective, therefore no 3D rendering context -
     that combination is what painted the dark back face over the photo on
     iOS Safari and made the cards read as black. */
  .flip-card-inner{
    position:absolute; inset:0;
    transform:scaleX(1);
    transition:transform 0.55s ease-in-out;
  }
  .flip-card.flipped .flip-card-inner{ transform:scaleX(-1); }
  .flip-card-front, .flip-card-back{
    position:absolute; inset:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    transition:opacity 0s linear 0.275s;
  }
  .flip-card-front{ opacity:1; z-index:2; }
  .flip-card-back{ opacity:0; z-index:1; transform:scaleX(-1); }
  .flip-card.flipped .flip-card-front{ opacity:0; }
  .flip-card.flipped .flip-card-back{ opacity:1; }
  .flip-card-front img, .flip-card-back img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  @media (prefers-reduced-motion: reduce){
    .flip-card-inner{ transition:none; transform:none; }
    .flip-card.flipped .flip-card-inner{ transform:none; }
    .flip-card-back{ transform:none; }
    .flip-card-front, .flip-card-back{ transition:opacity .3s ease; }
  }




  .page-head { max-width: 62ch; }
  .page-head h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06; margin-top: 12px; }
  .page-head p { margin-top: 18px; color: var(--text-dim); font-size: 1.02rem; line-height: 1.65; }

/* Превюто на продуктовите страници ползва същите стилове като превюто на
   дърворезбите (.photo-frame / .dc3d-*) — те идват от assets/site.css. */

/* заглавията над галерията на продуктовата страница */
.prod-sec-title{ font-size:clamp(1.5rem,3vw,2.1rem); }
.prod-sec-lede{ margin-top:10px; max-width:58ch; }
.prod-gallery-empty{ margin-top:28px; color:var(--text-faint); font-size:.9rem; }

/* ---------------- секцията с трите продукта на началната ---------------- */
.prod-grid{
  /* Картите са с изправена (портретна) пропорция като самите дърворезби,
     затова са и по-тесни — иначе заемат половин екран. */
  display:grid; grid-template-columns:repeat(3, minmax(0, 262px));
  justify-content:center; gap:26px; margin-top:40px;
}
.prod-card{
  display:flex; flex-direction:column;
  background:var(--bg-1); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.prod-card:hover{ border-color:rgba(214,154,82,.45); transform:translateY(-3px); }
.prod-card-media{ display:block; aspect-ratio:3/4; overflow:hidden; background:var(--surface-2); }
.prod-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.prod-card:hover .prod-card-media img{ transform:scale(1.04); }
.prod-card-empty{ display:block; width:100%; height:100%;
  background:linear-gradient(135deg, rgba(214,154,82,.16), transparent 70%); }
.prod-card h3{ margin:16px 18px 0; font-size:1rem; line-height:1.3; }
.prod-card h3 a{ color:var(--text); text-decoration:none; }
.prod-card h3 a:hover{ color:var(--accent); }
.prod-card p{ margin:9px 18px 0; color:var(--text-dim); font-size:.86rem; line-height:1.55; }
.prod-card-link{
  display:inline-flex; align-items:center; gap:.45em;
  margin:auto 18px 18px; font-size:.84rem; font-weight:600;
  color:var(--accent); text-decoration:none;
}
.prod-card-link svg{ width:15px; height:15px; }
.prod-card-link:hover{ text-decoration:underline; }

@media (max-width: 900px){
  .prod-grid{ grid-template-columns:repeat(2, minmax(0, 262px)); gap:20px; }
}
@media (max-width: 620px){
  /* на телефон картите застават една под друга, но не се разпъват
     на цялата ширина — иначе изправената снимка става много висока */
  .prod-grid{ grid-template-columns:minmax(0, 300px); gap:18px; }
  .prod-card h3{ margin:14px 16px 0; }
  .prod-card p{ margin:8px 16px 0; font-size:.85rem; }
  .prod-card-link{ margin:auto 16px 16px; }
}


/* ---------------- разстояния по продуктовите страници ----------------
   Тези страници са по-къси от началната и голямото поле между секциите
   изглежда като празнина, затова тук е около наполовина. */
.product-page{ padding-top:76px; }
.product-page .section-pad{ padding-block:clamp(34px, 4.2vw, 58px); }
.product-page > section:first-child{ padding-top:clamp(22px, 2.6vw, 38px); }
.product-page > section:last-child{ padding-bottom:clamp(40px, 5vw, 72px); }

.product-page .page-head h1{ margin-top:8px; }
.product-page .page-head p{ margin-top:12px; }
.product-page .page-head p + p{ margin-top:10px; }

.product-page .prod-sec-title{ margin:0; }
.product-page .prod-sec-lede{ margin-top:8px; }
.product-page .gallery-grid{ margin-top:26px; }
.product-page .gal-empty,
.product-page .prod-gallery-empty{ margin-top:20px; }

.product-page .configurator-head h2{ margin-top:6px; }
.product-page .configurator-head .lede{ margin-top:10px; }
.product-page .configurator-grid{ margin-top:32px; }
.product-page .opt-group{ padding-block:20px; }
.product-page .rotate-hint{ margin-top:12px; }
.product-page .preview-note{ margin-top:6px; }

@media (max-width:640px){
  .product-page{ padding-top:70px; }
  .product-page .section-pad{ padding-block:30px; }
  .product-page .configurator-grid{ margin-top:22px; }
  .product-page .opt-group{ padding-block:16px; }
}