/* Shared post cards: used by the homepage feed, category pages and the admin live preview.
   Markup comes from renderCard() in js/cards.js. Every class is prefixed dg- so nothing here
   collides with page styles (the admin's star picker also uses .rating-stars, for example). */

.dg-card, .dg-dialog{
  /* Shannon's palette (the "navy" name is historical: it is Warm Brown now) */
  --dg-navy:#5A4636;
  --dg-cream:#FFF9EF;
  --dg-gold:#F4C542;
  --dg-brown:#9C6B5E;
  --dg-teal:#A8B8A0;
  --dg-sage:#FBEFED;
  --dg-blush:#E8C8C5;
  --dg-butter:#FFF0B3;
  --dg-sale:#C75C6A;
  --dg-muted:#6B5A4C;
  --dg-line:rgba(90,70,54,0.14);
  --dg-accent:var(--dg-gold);
}
.dg-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  color:var(--dg-navy);
  border:2px solid var(--dg-line);
  border-radius:22px;
  box-shadow:0 10px 26px rgba(90,70,54,0.12);
  font-family:'Nunito', system-ui, sans-serif;
  text-align:left;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.dg-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(90,70,54,0.18);}
.dg-card *{box-sizing:border-box;}
.dg-card a{text-decoration:none;}

/* ---------- Photo area ---------- */
.dg-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:20px 20px 0 0;
  background:linear-gradient(135deg, var(--dg-butter), var(--dg-blush));
}
.dg-media img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform 0.5s ease;
}
.dg-card:hover .dg-media img{transform:scale(1.06);}
.dg-media-empty{display:grid;place-items:center;font-size:3rem;height:100%;}

/* Sale sticker: whatever she types in the Discount box */
.dg-sale{
  position:absolute;top:10px;left:10px;z-index:2;
  display:grid;place-items:center;text-align:center;
  min-width:74px;min-height:74px;max-width:110px;padding:8px;
  border-radius:50%;
  background:var(--dg-sale);color:#fff;
  border:3px solid #fff;
  box-shadow:0 6px 14px rgba(90,70,54,0.25);
  font-family:'Fredoka', 'Nunito', sans-serif;font-size:0.8rem;line-height:1.05;
  text-transform:uppercase;letter-spacing:0.3px;
  transform:rotate(-12deg);
  overflow-wrap:anywhere;
}
.dg-card:hover .dg-sale{animation:dgWiggle 0.6s ease;}
@keyframes dgWiggle{0%,100%{transform:rotate(-12deg);}30%{transform:rotate(-2deg) scale(1.08);}60%{transform:rotate(-16deg);}}

.dg-flags{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.dg-flag{
  font-family:'Fredoka', 'Nunito', sans-serif;font-size:0.6rem;letter-spacing:0.5px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:none;background:var(--dg-teal);color:#fff;
  box-shadow:0 4px 10px rgba(90,70,54,0.2);
}
.dg-flag-hot{background:var(--dg-sale);color:#fff;}
.dg-flag-tag{background:var(--dg-gold);color:var(--dg-navy);}

.dg-cat{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-size:0.72rem;font-weight:800;color:var(--dg-navy);
  background:rgba(255,249,239,0.94);border:none;border-radius:999px;padding:5px 11px;
  backdrop-filter:blur(4px);
}

/* ---------- Body ---------- */
.dg-body{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1;}
.dg-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.dg-kind{
  font-family:'Fredoka', 'Nunito', sans-serif;font-size:0.62rem;letter-spacing:0.8px;text-transform:uppercase;
  color:var(--dg-brown);
}
.dg-rating{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:0.8rem;color:var(--dg-navy);}
.dg-stars{display:inline-flex;gap:1px;}
.dg-star{
  font-size:0.95rem;line-height:1;
  background:linear-gradient(90deg, #E8A317 0%, #E8A317 var(--fill,0%), rgba(90,70,54,0.2) var(--fill,0%), rgba(90,70,54,0.2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.dg-card .dg-title{
  margin:0;font-family:'Nunito', system-ui, sans-serif;font-weight:900;font-size:1.12rem;line-height:1.3;color:var(--dg-navy);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  overflow-wrap:anywhere;
}

/* Her note. Clamped so every card in a row keeps the same height; "Read more" opens the rest. */
.dg-note{
  background:var(--dg-cream);border-radius:14px;padding:10px 12px;border-left:4px solid var(--dg-accent);
}
.dg-note-label{
  display:block;margin-bottom:3px;
  font-family:'Fredoka', 'Nunito', sans-serif;font-size:0.58rem;letter-spacing:0.8px;text-transform:uppercase;color:var(--dg-brown);
}
.dg-note p{
  margin:0;font-size:0.9rem;line-height:1.5;color:var(--dg-muted);font-weight:500;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  overflow-wrap:anywhere;
}
.dg-note a{color:var(--dg-navy);font-weight:800;text-decoration:underline;text-decoration-color:var(--dg-gold);}
.dg-more{
  align-self:flex-start;margin-top:4px;padding:0;background:none;border:none;cursor:pointer;
  font-family:'Nunito', system-ui, sans-serif;font-weight:800;font-size:0.8rem;color:var(--dg-brown);
  text-decoration:underline;text-underline-offset:2px;
}
.dg-more[hidden]{display:none;}

/* ---------- Buttons ---------- */
.dg-actions{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:4px;}
.dg-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 14px;border-radius:999px;border:none;
  background:var(--dg-gold);color:var(--dg-navy);box-shadow:0 8px 18px rgba(244,197,66,0.45);
  font-family:'Fredoka', 'Nunito', sans-serif;font-size:0.95rem;letter-spacing:0.2px;text-transform:none;text-align:center;
  line-height:1.2;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dg-cta .dg-arrow{transition:transform 0.15s ease;}
.dg-cta:hover, .dg-cta:focus-visible{transform:translateY(-2px);box-shadow:0 12px 24px rgba(244,197,66,0.55);background:#F7D060;}
.dg-cta:hover .dg-arrow{transform:translateX(4px);}
.dg-links{display:flex;flex-wrap:wrap;gap:6px;}
/* Small secondary buttons. Font, size and line-height are set explicitly so the host page's
   own link styles can't stretch them, and labels never wrap inside a pill. */
.dg-link{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;
  padding:7px 12px;border-radius:999px;border:2px solid var(--dg-line);background:#fff;color:var(--dg-navy);
  font-family:'Nunito', sans-serif;font-size:0.76rem;font-weight:800;line-height:1.2;letter-spacing:0;text-transform:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dg-link:hover{background:var(--dg-blush);color:var(--dg-navy);}
.dg-link img{width:13px;height:13px;flex-shrink:0;}
/* The storefront link gets its own full-width row so its longer label always fits on one line. */
.dg-link-storefront{flex:1 1 100%;padding:9px 14px;font-size:0.8rem;background:#FF9900;border-color:#FF9900;color:#111;}
.dg-link-storefront:hover, .dg-link-storefront:focus-visible{background:#FFAD33;border-color:#FFAD33;color:#111;}
.dg-disclose{font-size:0.68rem;font-weight:700;color:#8A8F8C;text-align:center;}

/* ---------- Social posts: branded by platform ---------- */
.dg-socialcard{--dg-accent:var(--dg-teal);}
.dg-platform-bar{
  display:flex;align-items:center;gap:8px;padding:9px 14px;color:#fff;
  border-radius:20px 20px 0 0;
  font-family:'Fredoka', 'Nunito', sans-serif;font-size:0.66rem;letter-spacing:0.6px;text-transform:uppercase;
}
.dg-platform-bar img{width:16px;height:16px;filter:brightness(0) invert(1);}
.dg-socialcard .dg-media{border-radius:0;}
.dg-cta-social{color:#fff;}
.dg-cta-social:hover, .dg-cta-social:focus-visible{background:var(--dg-navy);}
.dg-bg-facebook{background:#1877F2;}
.dg-bg-instagram{background:linear-gradient(45deg,#f9a825,#ee2a7b 55%,#6228d7);}
.dg-bg-tiktok{background:#111;}
.dg-bg-pinterest{background:#E60023;}

/* ---------- Substack stories ---------- */
.dg-storycard{background:var(--dg-sage);--dg-accent:var(--dg-blush);border-color:var(--dg-blush);}
.dg-storycard .dg-media img{filter:saturate(0.85);}
.dg-card.dg-storycard .dg-title{font-family:'Caveat Brush', 'Caveat', cursive;font-weight:400;font-size:1.8rem;line-height:1.05;-webkit-line-clamp:3;line-clamp:3;}
.dg-storycard .dg-note{background:rgba(255,255,255,0.7);border-left-color:var(--dg-blush);}
.dg-storycard .dg-note p{font-style:italic;font-weight:500;font-size:0.95rem;color:var(--dg-muted);-webkit-line-clamp:4;line-clamp:4;}
.dg-cta-story{background:var(--dg-blush);color:var(--dg-navy);box-shadow:0 8px 18px rgba(232,200,197,0.6);}
.dg-cta-story:hover, .dg-cta-story:focus-visible{background:#F0D7D4;box-shadow:0 12px 24px rgba(232,200,197,0.7);}

/* ---------- Amazon products ---------- */
.dg-amazoncard{--dg-accent:#FF9900;}
.dg-amazoncard .dg-media{background:#fff;}
.dg-amazoncard .dg-media img{object-fit:contain;padding:10px;}
.dg-cta-amazon{background:#FF9900;color:#111;box-shadow:0 8px 18px rgba(255,153,0,0.35);}
.dg-cta-amazon:hover, .dg-cta-amazon:focus-visible{background:#FFAD33;box-shadow:0 12px 24px rgba(255,153,0,0.45);}

/* ---------- "Follow me" card: shown when a source has nothing to show yet ---------- */
.dg-follow{
  grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 22px;border-radius:20px;background:#fff;border:2px dashed var(--dg-line, rgba(90,70,54,0.14));
  font-family:'Nunito', sans-serif;color:#5A4636;
}
.dg-follow p{margin:0;flex:1;min-width:200px;font-weight:700;}
.dg-follow a{
  font-family:'Fredoka', 'Nunito', sans-serif;padding:11px 18px;border-radius:999px;color:#fff;
  background:var(--follow-color, #5A4636);text-decoration:none;white-space:nowrap;
}

/* Facebook's embedded Page timeline (fallback until the Facebook connection is set up) */
.dg-fb-embed{grid-column:1/-1;display:flex;justify-content:center;}
.dg-fb-embed iframe{width:100%;max-width:500px;height:700px;border:none;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(90,70,54,0.12);}

/* ---------- "Read more" pop-up ---------- */
.dg-dialog{
  width:min(560px, calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;
  border:none;border-radius:24px;box-shadow:0 24px 60px rgba(90,70,54,0.35);
  background:#FFF9EF;color:#5A4636;font-family:'Nunito', system-ui, sans-serif;
}
.dg-dialog::backdrop{background:rgba(90,70,54,0.55);}
.dg-dialog-inner{padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;}
.dg-dialog h3{margin:0;padding-right:40px;font-size:1.25rem;line-height:1.3;font-weight:900;}
.dg-dialog-text{margin:0;font-size:0.95rem;line-height:1.6;color:#6B5A4C;overflow-wrap:anywhere;white-space:pre-line;}
.dg-dialog-text a{color:#5A4636;font-weight:800;text-decoration:underline;text-decoration-color:#F4C542;}
.dg-dialog .dg-actions{margin-top:6px;}
.dg-dialog-close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:none;background:#F4C542;color:#5A4636;font-size:1.1rem;font-weight:800;
}

@media (prefers-reduced-motion: reduce){
  .dg-card, .dg-media img, .dg-cta{transition:none;}
  .dg-card:hover .dg-sale{animation:none;}
  .dg-card:hover .dg-media img{transform:none;}
}