/* ================================
   DRG Block: Icon Cards Grid
================================ */

.drg-icg{
  position: relative;
  width: 100%;
  padding: clamp(3.5rem, 5vw, 6rem) 0;
}

/* Full-bleed on front end */
.drg-icg.alignfull{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Editor: avoid 100vw hack */
.block-editor-page .drg-icg.alignfull,
.editor-styles-wrapper .drg-icg.alignfull{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.drg-icg__inner{
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ================================
   Header
================================ */

.drg-icg__header{
  text-align: center;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.drg-icg__eyebrow{
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .9rem;
  opacity: .8;
  margin-bottom: .75rem;
}

.drg-icg__title{
  margin: 0;
  line-height: .95;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
}

.drg-icg__subhead{
  margin-top: .9rem;
  font-size: clamp(1.2rem, 1.8vw, 1.9rem);
  line-height: 1.25;
  opacity: .95;
}

/* ================================
   Stagger System
================================ */

.drg-icg__stagger{
  --icg-stagger-start: 150ms;
  --icg-stagger-step: 90ms;
}

.drg-icg__stagger .drg-stagger{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 520ms var(--reveal-ease, cubic-bezier(.2,.9,.2,1)),
    transform 620ms var(--reveal-ease, cubic-bezier(.2,.9,.2,1));
  transition-delay: calc(var(--icg-stagger-start) + (var(--i, 0) * var(--icg-stagger-step)));
  will-change: opacity, transform;
}

.drg-icg__stagger.is-in .drg-stagger{
  opacity: 1;
  transform: translate3d(0,0,0);
}

@media (max-width: 900px){
  .drg-icg__stagger{
    --icg-stagger-step: 150ms;
  }
}

@media (prefers-reduced-motion: reduce){
  .drg-icg__stagger .drg-stagger{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Editor preview fix */
.block-editor-page .drg-icg .drg-reveal,
.editor-styles-wrapper .drg-icg .drg-reveal{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  transition: none !important;
}

.block-editor-page .drg-icg .drg-stagger,
.editor-styles-wrapper .drg-icg .drg-stagger{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ================================
   Grid
================================ */

.drg-icg__grid{
  display: grid;
  grid-template-columns: repeat(var(--drg-icg-cols, 4), minmax(0, 1fr));
  gap: clamp(1.35rem, 2vw, 2rem);
  align-items: stretch;
}

@media (max-width: 900px){
  .drg-icg__grid{
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Last-row centering */

/* 4 columns: remainder 2 */
@media (min-width: 901px){
  .drg-icg[style*="--drg-icg-cols: 4"] .drg-icg__grid > :nth-last-child(2):nth-child(4n + 1){
    grid-column: 2;
  }

  .drg-icg[style*="--drg-icg-cols: 4"] .drg-icg__grid > :last-child:nth-child(4n + 2){
    grid-column: 3;
  }
}

/* 3 columns: remainder 1 */
@media (min-width: 901px){
  .drg-icg[style*="--drg-icg-cols: 3"] .drg-icg__grid > :last-child:nth-child(3n + 1){
    grid-column: 2;
  }
}

/* 3 columns: remainder 2 */
@media (min-width: 901px){
  .drg-icg[style*="--drg-icg-cols: 3"] .drg-icg__grid > :nth-last-child(2):nth-child(3n + 1){
    grid-column: 2;
  }

  .drg-icg[style*="--drg-icg-cols: 3"] .drg-icg__grid > :last-child:nth-child(3n + 2){
    grid-column: 3;
  }
}

/* 2 columns: remainder 1 */
@media (min-width: 901px){
  .drg-icg[style*="--drg-icg-cols: 2"] .drg-icg__grid > :last-child:nth-child(2n + 1){
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 520px;
    width: 100%;
  }
}

/* ================================
   Cards
================================ */

.drg-icg__card{
  background: #fff;
  border-radius: 26px;
  padding: 0 0 28px;
  min-width: 0;
  min-height: 360px;
  color: #111 !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    0 6px 16px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
  transform: translate3d(0,0,0);
  transition:
    transform 260ms var(--reveal-ease-snap, cubic-bezier(.16,1,.3,1)),
    box-shadow 260ms var(--reveal-ease-snap, cubic-bezier(.16,1,.3,1));
}

/* Linked card should inherit card styling */
a.drg-icg__card{
  color: #111 !important;
  display: block;
  text-decoration: none;
}

/* Top spacing + accent title bar */
.drg-icg__card-bar{
  --card-accent: var(--wp--preset--color--primary-blue, #2c479d);
  background: var(--card-accent);
  color: #fff;
  margin: 42px 0 18px;
  padding: .8rem 1.5rem .75rem;
}

/* Fallback if template still uses old title without bar */
.drg-icg__card > .drg-icg__card-title{
  margin: 42px 0 18px;
  padding: .8rem 1.5rem .75rem;
  background: var(--wp--preset--color--primary-blue, #2c479d);
  color: #fff !important;
}

/* Card title */
.drg-icg__card-title{
  margin: 0;
  color: #fff !important;
  font-weight: 900;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Card body */
.drg-icg__card-text{
  margin: 0;
  color: #111;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.42;
  opacity: 1;
  padding: 0 1.5rem;
}

.drg-icg__card-text p{
  margin: 0 0 .65rem;
}

.drg-icg__card-text p:last-child{
  margin-bottom: 0;
}

.drg-icg__card-text strong,
.drg-icg__card-text b{
  display: block;
  color: var(--wp--preset--color--primary-blue, #2c479d);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.15;
  margin-bottom: .65rem;
}

/* Links inside card text */
.drg-icg__card .drg-icg__card-text a{
  color: var(--wp--preset--color--secondary-blue, #34c4e9);
  font-weight: 800;
}

/* Hover */
@media (hover:hover){
  .drg-icg__card:hover{
    transform: translate3d(0,-6px,0);
    box-shadow:
      0 24px 52px rgba(0,0,0,.22),
      0 8px 22px rgba(0,0,0,.12);
  }
}

.drg-icg__card:focus-visible{
  transform: translate3d(0,-6px,0);
  box-shadow:
    0 24px 52px rgba(0,0,0,.22),
    0 0 0 3px rgba(52,196,233,.45);
  outline: none;
}

/* Remove old linked-card line/ring design */
.drg-icg__card::before,
.drg-icg__card::after,
.drg-icg__card.is-link::before,
.drg-icg__card.is-link::after{
  content: none !important;
  display: none !important;
}

/* Icon, if used */
.drg-icg__icon{
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 24px 1.5rem 0;
}

.drg-icg__icon img{
  width: 52px;
  height: 52px;
  object-fit: contain;
}

/* Chevron removed */
.drg-icg__chev{
  display: none !important;
}

/* ================================
   Background Color Classes
================================ */

.drg-icg.bg-black{
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(98,0,255,.22), transparent 70%),
    radial-gradient(800px 520px at 82% 24%, rgba(236,0,140,.14), transparent 68%),
    radial-gradient(900px 600px at 50% 90%, rgba(52,196,233,.12), transparent 70%),
    linear-gradient(180deg, #09070d 0%, #050608 100%);
  color:#ffffff;
}

.drg-icg.bg-white{
  background-color:#ffffff;
  color:#000000;
}

.drg-icg.bg-primary-blue{
  background-color:#2c479d;
  color:#ffffff;
}

.drg-icg.bg-secondary-blue{
  background-color:#34c4e9;
  color:#000000;
}

.drg-icg.bg-orange{
  background-color:#ff9613;
  color:#000000;
}

.drg-icg.bg-pink{
  background-color:#ec008c;
  color:#ffffff;
}

.drg-icg.bg-light-gray{
  background-color:#f2f2f2;
  color:#000000;
}

.drg-icg.bg-black .drg-icg__subhead,
.drg-icg.bg-primary-blue .drg-icg__subhead,
.drg-icg.bg-pink .drg-icg__subhead{
  opacity: .95;
}

/* ================================
   Mobile
================================ */

@media (max-width: 900px){
  .drg-icg__header{
    margin-bottom: 2rem;
  }

  .drg-icg__card{
    min-height: auto;
	  max-width: 300px;
    margin: auto;
  }

  .drg-icg__card-bar,
  .drg-icg__card > .drg-icg__card-title{
    margin-top: 34px;
  }
}