/* #*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#* cards.css *#*#*#*#*#*#*#*#*#*#*#*#*#*#*#* (C) 2025 DekTec */

/* Container for cards: flex layout with wrapping and spacing. */
.cards {margin:3.75rem 0; display:flex; flex-wrap:wrap; gap:2rem; justify-content:center}

/* Base styling for each card. The entire card is a clickable link, with content stacked vertically. */
.card {width:16.25rem; padding:1.25rem; border-radius:0.625rem; background-color:white; color:inherit;
       box-shadow:0 0.125rem 0.5rem rgba(0,0,0,0.08); transition:box-shadow 0.3s ease, transform 0.3s ease;
       display:flex; flex-direction:column; overflow:hidden; text-align:left}

/* For the card link, inherit font size from base style (h3). */
.blue-link.card-link {font-size:inherit}

/* Disable image dragging inside cards. */
.card * {-webkit-user-drag:none}

/* Remove underline from anchor-cards, both normal and visited states. */
.card:is(a, a:visited) {text-decoration:none}

/* Show a clear blue outline when a card is focused via keyboard navigation (Tab). */
.card:focus-visible {outline:0.15rem solid var(--color-dektec-blue); outline-offset:0.15rem}

/* Hover effect for cards. */
.card:hover {box-shadow:0 0.25rem 0.75rem rgba(0,0,0,0.15); transform:translateY(-0.125rem)}

/* Image container with fixed height, centers image inside. */
.card-picture {height:11.25rem; display:flex; align-items:center; justify-content:center}

/* Scales image to fit container and applies soft shadow. */
.card-picture img {width:auto; height:auto; max-width:100%; max-height:100%;
                   padding-left:var(--pad, 0); padding-right:var(--pad, 0);
                   filter:drop-shadow(0 0.9375rem 0.5rem rgba(0,0,0,0.15))}

/* Top margin for description text under heading, used for Product cards only. */
.card .small-text {margin-top:0.625rem}

/* Overrides for tradeshow card layout: less padding, no drop shadow, fonts. */
.tradeshow-cards .card-picture {height:9rem; padding:0 0.8rem}
.tradeshow-cards img {filter:none}
.tradeshow-cards p {font-size:1.2rem; font-weight:400; line-height:1.8rem}
.tradeshow-cards .date {font-size:1.1rem; font-weight:400}
.tradeshow-cards :is(.card, .card:hover, .card *, .card *:hover) {text-decoration:none}

/* --- Responsive layout for small (sm) screens (max-width:868px) --- */
@media (max-width:859.98px)
{
  .cards {margin:2rem 0; gap:0.8rem}
  .card {width:9.6rem; padding:0.9rem}
  .card-picture {height:7rem; padding-bottom:0.4rem}
  .card-picture img {padding-left:var(--pad-sm, 0); padding-right:var(--pad-sm, 0)}
  .card .small-text {margin-top:0rem; font-size:0.8rem; font-weight:400}

  .tradeshow-cards {gap:1rem}
  .tradeshow-cards .card {}
  .tradeshow-cards .card-picture {height:5.5rem; padding:0 0.4rem}
  .tradeshow-cards p {font-size:0.85rem; line-height:1.5rem}
  .tradeshow-cards .date {font-size:0.8rem}
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Landscape -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

@media (max-width:859.98px) and (orientation:landscape)
{
  .cards {margin:1rem 0}
  .card {width:9rem}
  .card-picture {height:5.5rem; padding-bottom:0.4rem}
  .card .blue-link {font-size:0.85rem}
  .card .small-text {font-size:0.7rem}
}