/* SE Professional category cards — locked April 15, 2026 (built April 16)
 *
 * Measured from existing .pro-features-grid + .pro-card + .pro-feature-card
 * (frontend/public/css/professional.css:265-336) and inline styles on the
 * old 5-card block in landing.html:
 *
 *   grid:        repeat(5,1fr); gap 1rem; tablet 1023px → 3-col; mobile 767px → 1-col
 *   card padding: 1.5rem 1rem (.pro-feature-card override of .pro-card 1.5rem)
 *                 tablet 1.25rem; mobile 1.5rem
 *   card radius: 12px
 *   card bg:     var(--pro-bg-card) = #1a1a1a
 *   card border: 1px solid var(--pro-border-light) = rgba(255,255,255,0.1)
 *   icon tile:   48x48; bg var(--pro-primary-light) = rgba(0,102,255,0.15); radius 12px
 *   icon stroke: #0066FF (blue)
 *   title:       <h3> font-weight 600; margin-bottom 0.5rem; (no inline font-size)
 *   desc:        var(--pro-text-secondary) = #AAAAAA; font-size 0.9rem
 *
 * Applied (per spec — only content, color accents, and column count change;
 * outer dimensions/spacing held to measured values):
 *
 *   grid:        repeat(4,1fr); gap 1rem (measured); tablet 1024px → 3-col; mobile 640px → 1-col
 *   card padding: 1.5rem 1rem (measured); tablet 1.25rem; mobile 1.5rem
 *   card radius: 12px (matches)
 *   card bg:     #15315E cobalt (spec — accent change for chrome cohesion)
 *   card border: 1px solid #2A4470 (spec — accent change)
 *   icon tile:   48x48 (matches); bg rgba(207,170,60,0.12) gold (spec); radius 12px (matches)
 *   icon stroke: #CFAA3C gold (spec — accent change)
 *   title:       Cinzel 1rem 600 #FFF (font-weight 600 measured; family/size per spec)
 *   desc:        0.9rem (measured) #8AA0C4 (spec); line-height 1.5
 *   min-height:  180px (new — visual alignment across 12 cards)
 */

:root {
  --pcard-bg: #15315E;
  --pcard-border: #2A4470;
  --pcard-icon-bg: rgba(207, 170, 60, 0.12);
  --pcard-icon-stroke: #CFAA3C;
  --pcard-title: #FFFFFF;
  --pcard-desc: #8AA0C4;
}

.pcard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .pcard-grid { grid-template-columns: repeat(3, 1fr); }
  .pcard { padding: 1.25rem; }
}

@media (max-width: 640px) {
  .pcard-grid { grid-template-columns: 1fr; }
  .pcard { padding: 1.5rem 1rem; }
}

.pcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--pcard-bg);
  border: 1px solid var(--pcard-border);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  min-height: 180px;
}

.pcard:hover {
  transform: translateY(-2px);
  border-color: var(--pcard-icon-stroke);
  background: #1A3A6B;
}

.pcard:focus-visible {
  outline: 2px solid var(--pcard-icon-stroke);
  outline-offset: 2px;
}

.pcard-icon-tile {
  width: 48px;
  height: 48px;
  background: var(--pcard-icon-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.pcard-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pcard-title);
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.02em;
}

.pcard-desc {
  color: var(--pcard-desc);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}