/**
 * css/all-tools-grid.css — Brand v2 site-wide "Apothecary" tools grid
 *
 * Used by includes/_all-tools-grid.php on every brand v2 page.
 *
 * Visual treatment (2026-05-05 night iteration — "cinematic upgrade"):
 *   - Paper grain noise overlay on every card (real parchment feel)
 *   - Layered shadow architecture (contact + drop + warm halo)
 *   - Decorative row rules: ✦ → ❦ fleuron → ✦
 *   - Hub cards: iridescent shimmer + pulsing top bar + rotating star
 *   - Floating ornaments (drifting opacity) between row sections
 *   - Bold card eyebrow tags (BROWSE ALL / SINGLE CARD etc.) for legibility
 */

.apothecary-section {
  margin: 6rem auto 4rem;
  padding: 0 1.5rem;
  max-width: 1180px;
}

/* ─── Section title ─── */
.apothecary-title {
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #3A1F38;
  text-align: center;
  margin: 0 0 0.6rem;
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.apothecary-title em {
  font-style: italic;
  color: #6B1F2C;
}
.apothecary-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem auto 1rem;
  max-width: 240px;
}
.apothecary-rule::before,
.apothecary-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #B89150, transparent);
}
.apothecary-rule-mark {
  color: #D4AC68;
  font-size: 0.95rem;
}

/* ─── Italic deck below the title ─── */
.apothecary-deck {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: #5a4034;
  text-align: center;
  max-width: 580px;
  margin: 0 auto 3.5rem;
  line-height: 1.55;
}

/* ─── Category row ─── */
.apothecary-row {
  position: relative;
  margin-bottom: 0;
}
.apothecary-row-head {
  display: flex;
  align-items: baseline;
  gap: 1.8rem;
  margin-bottom: 1.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(184, 145, 80, 0.22);
}
.apothecary-row-eyebrow {
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6B1F2C;
  flex-shrink: 0;
  line-height: 1;
}
.apothecary-row-script {
  font-family: 'Italianno', cursive;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: #8E6E3A;
  line-height: 0.85;
  flex-shrink: 0;
  text-shadow: 0 1px 0 rgba(245, 239, 224, 0.6),
               0 0 18px rgba(212, 172, 104, 0.18);
  position: relative;
  top: 0.15em;
}

/* ─── Decorative row rule: ✦ ─── ❦ ─── ✦ (flex; line breaks for fleuron, no fake bg) ─── */
.apothecary-row-rule {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  align-self: center;
}
.apothecary-row-rule .rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    rgba(184, 145, 80, 0.55),
    rgba(184, 145, 80, 0.25));
}
/* Fade the second segment toward the right end */
.apothecary-row-rule .rule-line + .rule-line,
.apothecary-row-rule .rule-fleuron ~ .rule-line {
  background: linear-gradient(to right,
    rgba(184, 145, 80, 0.4),
    rgba(184, 145, 80, 0.08));
}
.apothecary-row-rule .rule-star-left,
.apothecary-row-rule .rule-fleuron,
.apothecary-row-rule .rule-star-right {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.apothecary-row-rule .rule-star-left  { font-size: 0.85rem; color: #D4AC68; }
.apothecary-row-rule .rule-fleuron    { font-size: 1.2rem;  color: #8E6E3A; }
.apothecary-row-rule .rule-star-right { font-size: 0.65rem; color: #D4AC68; opacity: 0.7; }

/* ─── Floating ornaments between rows ─── */
.apothecary-between-rows {
  position: relative;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.apothecary-between-rows .ornament {
  position: absolute;
  color: #B89150;
  opacity: 0.45;
  filter: drop-shadow(0 0 6px rgba(212, 172, 104, 0.4));
  animation: apothecaryDrift 7.5s ease-in-out infinite;
}
@keyframes apothecaryDrift {
  0%, 100% { transform: translateY(0) rotate(0); opacity: 0.32; }
  50%      { transform: translateY(-12px) rotate(8deg); opacity: 0.78; }
}

/* ─── Card grid ─── */
.apothecary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  position: relative;
  z-index: 1;
}

/* ─── Card ─── */
.apothecary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 2rem 1.5rem 1.5rem;
  background: #F5EFE0;
  border: 1px solid #C9A867;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  /* Layered shadows */
  box-shadow:
    0 1px 2px rgba(58, 31, 56, 0.08),
    0 4px 8px rgba(58, 31, 56, 0.06),
    0 12px 32px -8px rgba(58, 31, 56, 0.12);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

/* Paper grain noise overlay on every card */
.apothecary-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='2'/><feColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.20  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.42;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.apothecary-card > * { position: relative; z-index: 1; }

.apothecary-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 2px rgba(58, 31, 56, 0.1),
    0 8px 16px rgba(58, 31, 56, 0.1),
    0 22px 50px -12px rgba(58, 31, 56, 0.22),
    0 0 0 1px rgba(212, 172, 104, 0.4);
  border-color: #D4AC68;
}

/* ─── HUB CARD: shimmer + pulsing top bar + rotating star ─── */
.apothecary-card.is-hub {
  background: linear-gradient(135deg, #F8EFD9 0%, #F2E5C5 100%);
  border-color: #B89150;
  border-width: 1.5px;
}

/* Pulsing gold top bar */
.apothecary-card.is-hub::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, #B89150, #D4AC68, #B89150);
  z-index: 3;
  animation: hubBarPulse 3.6s ease-in-out infinite;
}
@keyframes hubBarPulse {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 0 rgba(212, 172, 104, 0); }
  50%      { opacity: 1;    box-shadow: 0 0 14px rgba(212, 172, 104, 0.55); }
}

/* Iridescent shimmer sweep */
.apothecary-card-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 240, 200, 0) 40%,
    rgba(255, 240, 200, 0.42) 50%,
    rgba(255, 240, 200, 0) 60%,
    transparent 70%
  );
  animation: hubShimmer 5.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
  opacity: 0.6;
}
@keyframes hubShimmer {
  0%, 100% { transform: translateX(-30%); }
  50%      { transform: translateX(30%); }
}

/* Rotating gold star ornament (top-right corner) */
.apothecary-card-hubstar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  z-index: 3;
  animation: hubStarRotate 14s linear infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(212, 172, 104, 0.7));
}
.apothecary-card-hubstar svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes hubStarRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hub: warmer noise pattern */
.apothecary-card.is-hub::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='5'/><feColorMatrix type='matrix' values='0 0 0 0 0.65  0 0 0 0 0.52  0 0 0 0 0.30  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n2)' opacity='0.4'/></svg>");
  opacity: 0.38;
}

/* Corner brackets (gold filigree) */
.apothecary-card .ap-tl,
.apothecary-card .ap-tr,
.apothecary-card .ap-bl,
.apothecary-card .ap-br {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #B89150;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}
.apothecary-card .ap-tl { top: 6px;  left: 6px;  border-top: 1.2px solid; border-left:  1.2px solid; }
.apothecary-card .ap-tr { top: 6px;  right: 6px; border-top: 1.2px solid; border-right: 1.2px solid; }
.apothecary-card .ap-bl { bottom: 6px; left: 6px;  border-bottom: 1.2px solid; border-left:  1.2px solid; }
.apothecary-card .ap-br { bottom: 6px; right: 6px; border-bottom: 1.2px solid; border-right: 1.2px solid; }
.apothecary-card.is-hub .ap-tl,
.apothecary-card.is-hub .ap-tr,
.apothecary-card.is-hub .ap-bl,
.apothecary-card.is-hub .ap-br {
  border-color: #8E6E3A;
  opacity: 1;
}

/* Icon medallion */
.apothecary-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0.4rem;
  align-self: center;
}
.apothecary-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(58, 31, 56, 0.16));
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.apothecary-card:hover .apothecary-card-icon svg {
  transform: scale(1.08) rotate(-3deg);
}

/* ─── BOLDER CARD TAGS (BROWSE ALL / SINGLE CARD / etc.) ─── */
.apothecary-card-tag {
  font-family: 'EB Garamond', serif;
  font-weight: 700;                    /* was italic 400, now bold */
  font-size: 0.88rem;                  /* was 0.78rem */
  letter-spacing: 0.22em;              /* slightly wider for bold uppercase punch */
  text-transform: uppercase;
  color: #6B1F2C;                      /* burgundy — much higher contrast vs gold */
  /* Subtle gold underline accent */
  padding-bottom: 0.3rem;
  border-bottom: 1.5px solid rgba(184, 145, 80, 0.45);
  display: inline-block;
}
.apothecary-card.is-hub .apothecary-card-tag {
  color: #6B1F2C;
  border-bottom-color: rgba(184, 145, 80, 0.7);
}

.apothecary-card-name {
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-size: 1.18rem;
  color: #3A1F38;
  margin: 0;
  line-height: 1.25;
}
.apothecary-card-desc {
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  color: #5a4034;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}
.apothecary-card-cta {
  margin-top: 0.6rem;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: #6B1F2C;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.apothecary-card-arrow {
  display: inline-block;
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
  color: #B89150;
}
.apothecary-card:hover .apothecary-card-arrow {
  transform: translateX(5px);
  color: #6B1F2C;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .apothecary-between-rows .ornament,
  .apothecary-card.is-hub::before,
  .apothecary-card-shimmer,
  .apothecary-card-hubstar {
    animation: none;
  }
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .apothecary-grid { grid-template-columns: repeat(2, 1fr); }
  .apothecary-section { margin: 4.5rem auto 3rem; }
  .apothecary-row-head { flex-wrap: wrap; }
  .apothecary-row-rule { width: 100%; flex: none; min-width: 100%; }
}
@media (max-width: 600px) {
  .apothecary-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .apothecary-row-head { gap: 0.6rem; }
  .apothecary-row-script { font-size: 1.6rem; }
  .apothecary-card { padding: 1.6rem 1.2rem 1.2rem; }
  .apothecary-card-tag { font-size: 0.82rem; letter-spacing: 0.18em; }
}

/* Section spacing — give each row room to breathe with the floating ornaments above */
.apothecary-row + .apothecary-between-rows { margin-top: 2rem; }
.apothecary-between-rows + .apothecary-row { margin-top: 2.8rem; }
.apothecary-section .apothecary-row:first-of-type { margin-top: 0; }
.apothecary-section .apothecary-row:not(:last-child) { margin-bottom: 0; }