/* =================== premium-surface.css =================== */
/* premium-surface — premium content card (used on /about, /delivery, content
 * pages). Adds depth via layered shadow + gold-tinted top-rule accent so cards
 * read as objects on the cream page background instead of blending in.
 * Strictly .premium-surface / .premium-surface--*. */

.premium-surface {
position: relative;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 40px);
  background: var(--hc-paper, #ffffff);
  border-radius: clamp(16px, 1.4vw, 22px);
  border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.22));
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.04),
    0 22px 50px -28px rgba(40, 30, 15, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.32s ease;
  isolation: isolate;
  overflow: hidden;
}
.premium-surface::before {
content: "";
  position: absolute;
  top: 0;
  left: clamp(24px, 2.4vw, 40px);
  right: clamp(24px, 2.4vw, 40px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0,
    var(--hc-gold-1, var(--hc-gold, #d4b896)) 24%,
    var(--hc-gold-2, #b89a6f) 50%,
    var(--hc-gold-1, var(--hc-gold, #d4b896)) 76%,
    transparent 100%
  );
  opacity: 0.62;
  pointer-events: none;
}
.premium-surface::after {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(620px 360px at 100% -10%, rgba(212, 184, 150, 0.14), transparent 62%);
}
.premium-surface:hover {
border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
  box-shadow:
    0 2px 4px rgba(40, 30, 15, 0.05),
    0 28px 62px -22px rgba(184, 154, 111, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.premium-surface > div > strong, .premium-surface > div > b {
display: block;
  margin-bottom: 2px;
}

/* Highlight variant — used to break monotony in stacked-card sections.
 * Inverted: ink-tinted card with cream content, gold accents stay. */
.premium-surface--highlight {
background:
    radial-gradient(900px 460px at 0% 0%, rgba(212, 184, 150, 0.18), transparent 60%),
    linear-gradient(160deg, #1f1a16 0%, #2a2018 100%);
  border: 0.5px solid rgba(212, 184, 150, 0.32);
  color: rgba(252, 248, 240, 0.92);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 32px 70px -26px rgba(20, 14, 8, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.premium-surface--highlight::before {
opacity: 0.78;
}
.premium-surface--highlight::after {
background: radial-gradient(700px 380px at 100% 110%, rgba(212, 184, 150, 0.18), transparent 60%);
}
.premium-surface--highlight h1,
.premium-surface--highlight h2,
.premium-surface--highlight h3,
.premium-surface--highlight h4,
.premium-surface--highlight .t-title {
color: #fffdf8;
}
.premium-surface--highlight p {
color: rgba(252, 248, 240, 0.72);
}
.premium-surface--highlight [class*="eyebrow"] {
color: var(--hc-gold-1, var(--hc-gold, #d4b896));
}
.premium-surface--highlight:hover {
border-color: rgba(212, 184, 150, 0.55);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 40px 80px -22px rgba(20, 14, 8, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}