/* COSH shared card material system
   Loaded after page-level CSS so legacy cards inherit one visual language.
   New cards should use .c-card plus an explicit variant when needed. */

:root {
  --card-surface-top: #fffef9;
  --card-surface-mid: #faf1e4;
  --card-surface-bottom: #ead8bd;
  --card-edge: rgba(121, 89, 52, .22);
  --card-lip: rgba(126, 78, 24, .22);
  --card-highlight: rgba(255, 255, 255, .88);
  --card-shadow-rest:
    0 4px 0 var(--card-lip),
    0 13px 25px rgba(91, 60, 25, .14),
    inset 0 3px 2px var(--card-highlight),
    inset 0 -7px 12px rgba(126, 78, 24, .1);
  --card-shadow-hover:
    0 6px 0 var(--card-lip),
    0 18px 31px rgba(91, 60, 25, .19),
    inset 0 3px 2px rgba(255, 255, 255, .94),
    inset 0 -8px 13px rgba(126, 78, 24, .12);
  --card-radius: 20px;
}

/* Default surface. Legacy selectors are aliases until templates migrate. */
:is(
  .c-card,
  .card,
  .svc-card,
  .svc-numbered-card,
  .build-card,
  .plan-card,
  .related-card,
  .product-card,
  .blog-card,
  .home-blog-card,
  .pm-card,
  .trust-metric,
  .cart-panel,
  .build-guarantee
) {
  box-sizing: border-box;
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 32%),
    linear-gradient(145deg,
      var(--card-surface-top) 0%,
      var(--card-surface-mid) 57%,
      var(--card-surface-bottom) 100%);
  box-shadow: var(--card-shadow-rest);
}

.c-card { padding: 28px; }
.c-card--compact { padding: 20px; }
.c-card--media { padding: 0; overflow: hidden; }

/* Old .card:hover lifted every informational panel; default cards now stay put. */
.card:hover {
  border-color: var(--card-edge);
  box-shadow: var(--card-shadow-rest);
  transform: none;
}

/* Only cards with an action or selectable content lift on hover. */
:is(
  .c-card--interactive,
  .svc-card,
  .svc-numbered-card,
  .build-card,
  .plan-card,
  .related-card,
  .product-card,
  .blog-card,
  .home-blog-card,
  .pm-card,
  .store-card
) {
  transition:
    transform .3s var(--ease-calm),
    box-shadow .3s var(--ease-calm),
    border-color .3s var(--ease-calm),
    filter .3s var(--ease-calm);
}

:is(
  .c-card--interactive,
  .svc-card,
  .svc-numbered-card,
  .build-card,
  .plan-card,
  .related-card,
  .product-card,
  .blog-card,
  .home-blog-card,
  .pm-card,
  .store-card
):hover {
  border-color: rgba(121, 89, 52, .3);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
  filter: saturate(1.02);
}

:is(.c-card--interactive, .svc-card, .related-card, .home-blog-card):active {
  transform: translateY(1px);
  box-shadow:
    0 2px 0 var(--card-lip),
    0 7px 14px rgba(91, 60, 25, .13),
    inset 0 4px 9px rgba(126, 78, 24, .13),
    inset 0 -2px 2px rgba(255, 255, 255, .58);
}

:is(.c-card--interactive, .svc-card, .related-card, .home-blog-card):focus-visible {
  outline: 3px solid rgba(43, 178, 176, .4);
  outline-offset: 4px;
}

/* Featured cards keep the shared material, with a restrained gold edge. */
:is(.c-card--featured, .build-card.is-hot, .plan-card.is-featured) {
  --card-edge: rgba(205, 145, 24, .8);
  --card-lip: rgba(177, 113, 8, .42);
  --card-surface-top: #fffef7;
  --card-surface-mid: #fff3cf;
  --card-surface-bottom: #efd28f;
  box-shadow:
    0 5px 0 var(--card-lip),
    0 16px 29px rgba(145, 91, 13, .18),
    inset 0 3px 2px rgba(255, 255, 255, .9),
    inset 0 -8px 13px rgba(151, 94, 12, .12);
}

/* Tool surfaces are substantial but stay still while the user types. */
:is(.c-card--tool, .cart-panel) {
  --card-surface-top: #fffefb;
  --card-surface-mid: #f8f1e7;
  --card-surface-bottom: #e9dcc9;
  --card-lip: rgba(105, 79, 48, .18);
  box-shadow:
    0 3px 0 var(--card-lip),
    0 12px 23px rgba(70, 54, 36, .13),
    inset 0 3px 2px rgba(255, 255, 255, .9),
    inset 0 -6px 10px rgba(105, 79, 48, .09);
}

/* Compact metrics should read as a set, not five oversized buttons. */
.trust-metric {
  --card-radius: 16px;
  --card-surface-top: #fffdf7;
  --card-surface-mid: #f7efe3;
  --card-surface-bottom: #e9dcc7;
  --card-lip: rgba(126, 78, 24, .16);
  box-shadow:
    0 3px 0 var(--card-lip),
    0 9px 17px rgba(91, 60, 25, .11),
    inset 0 2px 1px rgba(255, 255, 255, .84),
    inset 0 -5px 8px rgba(126, 78, 24, .08);
}
.trust-metric:hover {
  border-color: var(--card-edge);
  transform: translateY(-2px);
  box-shadow:
    0 4px 0 var(--card-lip),
    0 12px 21px rgba(91, 60, 25, .14),
    inset 0 2px 1px rgba(255, 255, 255, .9),
    inset 0 -5px 8px rgba(126, 78, 24, .09);
}

/* Media cards keep imagery flush while the body uses the shared shell. */
:is(.product-card, .pm-card) {
  overflow: hidden;
}
.product-gallery {
  background: linear-gradient(145deg, #fffdf7, #eee3d3);
  border-bottom: 1px solid rgba(121, 89, 52, .14);
  box-shadow: inset 0 -6px 12px rgba(91, 60, 25, .06);
}

/* Editorial cards stay quieter than sales cards. */
:is(.blog-card, .home-blog-card, .related-card) {
  --card-surface-top: #fffefa;
  --card-surface-mid: #faf4eb;
  --card-surface-bottom: #eee1ce;
  --card-lip: rgba(108, 80, 47, .16);
}

/* The enterprise team card is the shared dark material variant. */
:is(.c-card--dark, .enterprise-team-card, .build-guarantee) {
  --card-edge: rgba(255, 255, 255, .13);
  --card-lip: rgba(20, 17, 14, .68);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(145deg, #554e46 0%, #3b3530 54%, #26221f 100%);
  box-shadow:
    0 5px 0 var(--card-lip),
    0 16px 30px rgba(44, 39, 32, .24),
    inset 0 3px 2px rgba(255, 255, 255, .12),
    inset 0 -8px 13px rgba(0, 0, 0, .2);
}
:is(.c-card--dark, .enterprise-team-card, .build-guarantee):hover {
  border-color: rgba(255, 255, 255, .16);
  transform: none;
  filter: none;
  box-shadow:
    0 5px 0 var(--card-lip),
    0 16px 30px rgba(44, 39, 32, .24),
    inset 0 3px 2px rgba(255, 255, 255, .12),
    inset 0 -8px 13px rgba(0, 0, 0, .2);
}

.build-guarantee-grid > div {
  position: relative;
  padding: 8px 16px;
}
.build-guarantee-grid > div + div::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: -16px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .16), transparent);
  box-shadow: 1px 0 0 rgba(0, 0, 0, .2);
}
.build-g-num {
  text-shadow: 0 2px 0 rgba(0, 0, 0, .24), 0 0 12px rgba(232, 173, 16, .09);
}

/* A card inside a card is content, not another floating shell. */
:is(.c-card, .card, .plan-card, .product-card, .pm-card) > :is(.c-card, .card) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 600px) {
  :root { --card-radius: 18px; }

  :is(
    .c-card,
    .card,
    .svc-card,
    .svc-numbered-card,
    .build-card,
    .plan-card,
    .related-card,
    .product-card,
    .blog-card,
    .home-blog-card,
    .pm-card,
    .cart-panel,
    .build-guarantee
  ) {
    box-shadow:
      0 3px 0 var(--card-lip),
      0 10px 19px rgba(91, 60, 25, .13),
      inset 0 2px 1px var(--card-highlight),
      inset 0 -6px 10px rgba(126, 78, 24, .09);
  }

  :is(
    .c-card--interactive,
    .svc-card,
    .svc-numbered-card,
    .build-card,
    .plan-card,
    .related-card,
    .product-card,
    .blog-card,
    .home-blog-card,
    .pm-card,
    .store-card
  ):hover {
    transform: translateY(-2px);
  }

  .trust-metric { --card-radius: 14px; }

  :is(.c-card--featured, .build-card.is-hot, .plan-card.is-featured) {
    box-shadow:
      0 4px 0 var(--card-lip),
      0 13px 23px rgba(145, 91, 13, .17),
      inset 0 2px 1px rgba(255, 255, 255, .88),
      inset 0 -6px 10px rgba(151, 94, 12, .11);
  }

  :is(.c-card--tool, .cart-panel) {
    box-shadow:
      0 3px 0 var(--card-lip),
      0 10px 18px rgba(70, 54, 36, .12),
      inset 0 2px 1px rgba(255, 255, 255, .88),
      inset 0 -5px 9px rgba(105, 79, 48, .08);
  }

  .trust-metric {
    box-shadow:
      0 2px 0 var(--card-lip),
      0 7px 13px rgba(91, 60, 25, .1),
      inset 0 2px 1px rgba(255, 255, 255, .84),
      inset 0 -4px 7px rgba(126, 78, 24, .07);
  }

  :is(.c-card--dark, .enterprise-team-card, .build-guarantee),
  :is(.c-card--dark, .enterprise-team-card, .build-guarantee):hover {
    box-shadow:
      0 3px 0 rgba(20, 17, 14, .68),
      0 12px 22px rgba(44, 39, 32, .22),
      inset 0 2px 1px rgba(255, 255, 255, .11),
      inset 0 -6px 10px rgba(0, 0, 0, .18);
  }

  .build-guarantee-grid > div {
    padding: 18px 10px;
  }
  .build-guarantee-grid > div + div::before {
    inset: 0 14% auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .c-card--interactive,
    .svc-card,
    .svc-numbered-card,
    .build-card,
    .plan-card,
    .related-card,
    .product-card,
    .blog-card,
    .home-blog-card,
    .pm-card,
    .store-card
  ) {
    transition: none;
  }
}