/**
 * Bento Blocks — Frontend Styles
 * Cooper Health Brand Portal
 *
 * Two custom Gutenberg blocks for interior pages:
 *   1. Bento Grid  — responsive CSS Grid container
 *   2. Bento Card  — content tile in light, dark, or glass variants
 *
 * Design tokens are kept in sync with the Next.js frontend
 * (globals.css custom properties). Where the frontend uses
 * Tailwind / CSS vars, this stylesheet uses the same literal
 * values so the blocks render identically on both the WP
 * preview and the headless front-end.
 *
 * -------------------------------------------------------
 *  Tokens (from Brand Portal theme)
 * -------------------------------------------------------
 *  Cooper Red    #BF0D3E
 *  Navy          #2a3b6b
 *  Dark          #1a1a2e
 *  Gray-200      #e2e6ec
 *  Gray-700      #374151
 *  Text Primary  #1a1a2e
 *  Text Muted    #718096
 *  Font          'Lato', sans-serif
 *  Radius        12–16 px
 *  Shadow-sm     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)
 * -------------------------------------------------------
 */


/* ==========================================================
   1. GRID CONTAINER
   ========================================================== */

.bento-grid-block {
  display: grid;
  gap: 24px;
  align-items: stretch; /* equal-height cards per row */
  width: 100%;
}

/* Column counts driven by the data-columns attribute */
.bento-grid-block[data-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.bento-grid-block[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.bento-grid-block[data-columns="4"] {
  grid-template-columns: repeat(4, 1fr);
}

/* -- Responsive breakpoints -------------------------------- */

/* Tablet: collapse to 2 columns */
@media (max-width: 900px) {
  .bento-grid-block[data-columns="3"],
  .bento-grid-block[data-columns="4"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-grid-block {
    gap: 20px;
  }
}

/* Mobile: single column */
@media (max-width: 680px) {
  .bento-grid-block,
  .bento-grid-block[data-columns="2"],
  .bento-grid-block[data-columns="3"],
  .bento-grid-block[data-columns="4"] {
    grid-template-columns: 1fr;
  }

  .bento-grid-block {
    gap: 16px;
  }
}


/* ==========================================================
   2. CARD BASE
   ========================================================== */

.bento-card {
  position: relative;
  padding: 28px 24px;
  border-radius: 14px;
  font-family: 'Lato', sans-serif;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Ensure cards fill the grid cell height */
  display: flex;
  flex-direction: column;
}


/* ==========================================================
   3. CARD VARIANTS
   ========================================================== */

/* ---- 3a. Light Card ------------------------------------- */

.bento-card--light {
  background: #ffffff;
  border: 1px solid #e2e6ec;
  color: #374151;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
              0 1px 2px rgba(0, 0, 0, 0.04);
}

.bento-card--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.bento-card--light .bento-card__title {
  color: #1a1a2e;
}


/* ---- 3b. Dark Card -------------------------------------- */

.bento-card--dark {
  background: linear-gradient(135deg, #1a1a2e, #0d1b30);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.bento-card--dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.bento-card--dark .bento-card__title {
  color: #ffffff;
}


/* ---- 3c. Glass Card ------------------------------------- */

.bento-card--glass {
  background: rgba(248, 249, 250, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #374151;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bento-card--glass:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.1);
}

.bento-card--glass .bento-card__title {
  color: #1a1a2e;
}


/* ==========================================================
   4. CARD TITLE
   ========================================================== */

.bento-card__title {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  font-family: 'Lato', sans-serif;
}


/* ==========================================================
   5. INNERBLOCKS CONTENT — Generic element styles
   ----------------------------------------------------------
   Card content comes from InnerBlocks, so we style common
   elements scoped inside .bento-card to keep things tidy.
   ========================================================== */

/* -- Paragraphs ------------------------------------------- */

.bento-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.bento-card p:last-child {
  margin-bottom: 0;
}

/* Muted text for light and glass variants */
.bento-card--light p,
.bento-card--glass p {
  color: #718096;
}

/* Slightly softer white for dark card paragraphs */
.bento-card--dark p {
  color: rgba(255, 255, 255, 0.78);
}


/* -- Links ------------------------------------------------ */

.bento-card--light a,
.bento-card--glass a {
  color: #BF0D3E;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.bento-card--light a:hover,
.bento-card--glass a:hover {
  color: #2a3b6b;
}

/* Dark card links: soft blue for contrast against navy */
.bento-card--dark a {
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.bento-card--dark a:hover {
  color: #ffffff;
}


/* -- Images ----------------------------------------------- */

.bento-card img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}


/* -- Lists ------------------------------------------------ */

.bento-card ul,
.bento-card ol {
  margin: 0 0 12px 0;
  padding-left: 1.25em;
  font-size: 0.95rem;
  line-height: 1.6;
}

.bento-card li {
  margin-bottom: 4px;
}

.bento-card li:last-child {
  margin-bottom: 0;
}

.bento-card--light li,
.bento-card--glass li {
  color: #718096;
}

.bento-card--dark li {
  color: rgba(255, 255, 255, 0.78);
}


/* -- Headings inside cards (h4, h5, h6 from InnerBlocks) -- */

.bento-card h4,
.bento-card h5,
.bento-card h6 {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 16px 0 8px 0;
}

.bento-card h4 { font-size: 1rem; }
.bento-card h5 { font-size: 0.9rem; }
.bento-card h6 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }

.bento-card--light h4,
.bento-card--light h5,
.bento-card--light h6,
.bento-card--glass h4,
.bento-card--glass h5,
.bento-card--glass h6 {
  color: #1a1a2e;
}

.bento-card--dark h4,
.bento-card--dark h5,
.bento-card--dark h6 {
  color: #ffffff;
}


/* -- Buttons (wp-block-button inside cards) --------------- */

.bento-card .wp-block-button {
  margin: 16px 0 4px 0;
}

.bento-card .wp-block-button__link {
  display: inline-block;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

/* Light/glass card buttons: filled Cooper Red */
.bento-card--light .wp-block-button__link,
.bento-card--glass .wp-block-button__link {
  background: #BF0D3E;
  color: #ffffff;
}

.bento-card--light .wp-block-button__link:hover,
.bento-card--glass .wp-block-button__link:hover {
  background: #a10b35;
  transform: translateY(-1px);
}

/* Dark card buttons: white outline style */
.bento-card--dark .wp-block-button__link {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.bento-card--dark .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}


/* -- Blockquotes ------------------------------------------ */

.bento-card blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 3px solid #BF0D3E;
  font-style: italic;
  font-size: 0.95rem;
}

.bento-card--light blockquote,
.bento-card--glass blockquote {
  background: rgba(0, 0, 0, 0.02);
  color: #4a5568;
}

.bento-card--dark blockquote {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}


/* -- Separators / Horizontal rules ------------------------ */

.bento-card hr {
  border: none;
  height: 1px;
  margin: 16px 0;
}

.bento-card--light hr,
.bento-card--glass hr {
  background: #e2e6ec;
}

.bento-card--dark hr {
  background: rgba(255, 255, 255, 0.1);
}


/* ==========================================================
   6. ACCESSIBILITY — Focus states
   ========================================================== */

.bento-card:focus-within {
  outline: 2px solid #BF0D3E;
  outline-offset: 2px;
}

.bento-card a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

.bento-card .wp-block-button__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(191, 13, 62, 0.3);
}


/* ==========================================================
   7. REDUCED MOTION — Respect user preference
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .bento-card {
    transition: none;
  }

  .bento-card:hover {
    transform: none;
  }

  .bento-card .wp-block-button__link {
    transition: none;
  }
}