/* ============================================================
   YIZZOO - Components
   Buttons (28-29), quest tags + stamps (10), cards (18, 26, 27).
   ============================================================ */

/* ============================================================
   BUTTONS (blueprint 28)
   48px tall, 0 24px padding, 8px radius. Never rotated.
   ============================================================ */
.yz-btn{
  --btn-bg: var(--color-coral);
  --btn-fg: var(--color-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--radius-button);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(23,49,58,0.10);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.yz-btn:hover{
  background: var(--color-coral-dark);
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23,49,58,0.18);
}
.yz-btn:active{ transform: translateY(0); box-shadow: 0 1px 0 rgba(23,49,58,0.12); }

/* The arrow slides on hover (blueprint 73). Nothing else moves. */
.yz-btn__arrow{
  transition: transform var(--t-base) var(--ease);
  flex: none;
}
.yz-btn:hover .yz-btn__arrow{ transform: translateX(3px); }

/* Secondary: transparent, 2px teal border (blueprint 28) */
.yz-btn--secondary{
  background: transparent;
  color: var(--color-teal);
  border: 2px solid var(--color-teal);
  box-shadow: none;
}
.yz-btn--secondary:hover{
  background: var(--color-teal);
  color: var(--color-paper);
  box-shadow: 0 4px 12px rgba(23,49,58,0.16);
}

/* Dark: midnight, for admin actions and special hero CTAs */
.yz-btn--dark{ background: var(--color-midnight); }
.yz-btn--dark:hover{ background: var(--color-midnight-90); }

.yz-btn--small{ height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-small); }
.yz-btn--block{ width: 100%; }

/* A text link that behaves like a CTA without the weight of a button. */
.yz-link-cta{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-teal);
}
.yz-link-cta svg{ transition: transform var(--t-base) var(--ease); }
.yz-link-cta:hover svg{ transform: translateX(3px); }

/* ============================================================
   QUEST TAGS (blueprint 10)
   Small factual badges: Indoor, 30 min, Teen, Printable.
   ============================================================ */
.yz-tags{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.yz-tag{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: rgba(255,253,247,0.7);
  color: var(--color-soft-ink);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.yz-tag svg{ flex: none; color: var(--color-teal); }
.yz-tag--sage{ border-color: rgba(118,136,106,0.45); color: #4F6047; }
.yz-tag--gold{ border-color: var(--color-gold-30); color: #8A6A21; }

/* ============================================================
   STAMPS (blueprint 10) - Free, New, Popular, Staff Pick.
   Used sparingly. Slight rotation is allowed here.
   ============================================================ */
.yz-stamp{
  display: inline-block;
  padding: 5px 10px;
  border: 2px solid var(--color-red);
  border-radius: 3px;
  color: var(--color-red);
  background: rgba(165,79,67,0.06);
  font-size: var(--fs-meta);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.yz-stamp--free{ border-color: var(--color-sage); color: #465239; background: rgba(118,136,106,0.10); }
.yz-stamp--gold{ border-color: var(--color-gold); color: #8A6A21; background: var(--color-gold-12); }

/* ============================================================
   CARD BASE
   Paper surface, warm border, 10px radius, gentle depth.
   ============================================================ */
.yz-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.yz-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-gold-30);
  color: inherit;
}
.yz-card__media{
  position: relative;
  overflow: hidden;
  background: var(--color-parchment-deep);
}
.yz-card__media > svg,
.yz-card__media > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease);
}
.yz-card:hover .yz-card__media > svg,
.yz-card:hover .yz-card__media > img{ transform: scale(1.035); }

.yz-card__body{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  flex: 1;
}
.yz-card__title{
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
  color: var(--color-midnight);
  margin: 0;
}
.yz-card__desc{
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-soft-ink);
  margin: 0;
}
.yz-card__foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Gold corner fold: the premium indicator (blueprint 27). */
.yz-card--premium::before{
  content: "";
  position: absolute;
  top: 0; right: 0;
  z-index: 2;
  width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--color-gold) 0 50%, transparent 50%);
  border-top-right-radius: var(--radius-card);
}

/* ============================================================
   CATEGORY CARD (blueprint 18)
   Illustrated background, icon, title, one-line description, arrow.
   ============================================================ */
.yz-catgrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.yz-cat{
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.yz-cat:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  color: inherit;
}
/* The illustration sits behind the text, scaling gently on hover. */
.yz-cat__art{
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform 340ms var(--ease);
}
.yz-cat:hover .yz-cat__art{ transform: scale(1.04); }
.yz-cat__art svg{ width: 100%; height: 100%; }
/* Readability scrim: the title must hold contrast over any artwork. */
.yz-cat__scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(23,49,58,0.78) 0%,
    rgba(23,49,58,0.42) 45%,
    rgba(23,49,58,0.06) 78%,
    transparent 100%);
}
.yz-cat__inner{ position: relative; z-index: 2; }
.yz-cat__icon{
  width: 34px; height: 34px;
  margin-bottom: var(--sp-3);
  color: var(--color-gold);
}
.yz-cat__title{
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 28;
  color: #FFFDF7;
  margin: 0 0 6px;
}
.yz-cat__desc{
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgba(255,253,247,0.86);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.yz-cat__desc svg{ flex: none; transition: transform var(--t-base) var(--ease); }
.yz-cat:hover .yz-cat__desc svg{ transform: translateX(4px); }

@media (max-width: 1023px){
  .yz-catgrid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (max-width: 639px){
  .yz-catgrid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  /* Two cards across a 390px phone leaves ~171px of width, so the
     longest pair (a two-line title over a three-line description)
     needs this much height or the description clips. */
  .yz-cat{ min-height: 200px; padding: var(--sp-4); }
  .yz-cat__title{ font-size: 19px; line-height: 24px; }
  .yz-cat__desc{ font-size: var(--fs-meta); line-height: 17px; align-items: flex-start; }
  .yz-cat__desc svg{ margin-top: 2px; }
  .yz-cat__icon{ width: 24px; height: 24px; margin-bottom: var(--sp-2); }
}

/* ============================================================
   GUIDE CARD (blueprint 26) - 3 across, 16:10 image, light metadata
   ============================================================ */
.yz-grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.yz-grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

.yz-guide .yz-card__media{ aspect-ratio: 16 / 10; }
.yz-guide__cat{
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-teal);
}
.yz-guide__read{
  font-size: var(--fs-meta);
  color: var(--color-soft-ink);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================
   PRODUCT CARD (blueprint 27) - more premium than a guide card
   ============================================================ */
.yz-product .yz-card__media{ aspect-ratio: 4 / 5; }
.yz-product__meta{
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--color-soft-ink);
  letter-spacing: 0.02em;
}
.yz-product__price{
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
  color: var(--color-midnight);
}

/* ============================================================
   SEASONAL / COLLECTION CARD (blueprint 25)
   Wide editorial card, four across, strong thematic illustration.
   ============================================================ */
.yz-season{
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-5);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.yz-season:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); color: inherit; }
.yz-season__art{ position: absolute; inset: 0; z-index: 0; transition: transform 340ms var(--ease); }
.yz-season:hover .yz-season__art{ transform: scale(1.04); }
.yz-season__art svg{ width: 100%; height: 100%; }
.yz-season__scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(23,49,58,0.80) 0%, rgba(23,49,58,0.30) 55%, transparent 100%);
}
.yz-season__inner{ position: relative; z-index: 2; }
.yz-season__title,
.yz-season__count{ display: block; }
.yz-season__title{
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 28;
  color: #FFFDF7;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.yz-season__count{
  font-size: var(--fs-small);
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

@media (max-width: 1023px){
  .yz-grid-3, .yz-grid-4{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (max-width: 639px){
  .yz-grid-3, .yz-grid-4{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .yz-season{ min-height: 200px; }
}

/* Category title must occupy its own line above the description. */
.yz-cat__title{ display: block; }