/*********************************
RESOURCES
*********************************/
/* ===== Resource Cards Base ===== */
.iss-resource-cards { position:relative; width:100%; min-height:720px; padding:20px 0; }

/* ===== Main Card ===== */
.iss-resource-card { position:absolute; width:32%; height:400px; overflow:hidden; border-radius:8px; padding:34px; box-sizing:border-box; color:#102020; background:#ffffff; transition:transform .25s ease, box-shadow .25s ease; will-change:transform; z-index:1; }
.iss-resource-card:hover { box-shadow:0 18px 34px rgba(0,0,0,0.2); z-index:10; }

/* ===== Inner Content ===== */
.iss-card-inner { position:relative; z-index:3; height:100%; display:flex; flex-direction:column; align-items:flex-start; }

/* ===== Text ===== */
.iss-resource-card h3 { color:inherit !important; font-size:clamp(24px,2.15vw,32px); line-height:1.08; font-weight:800; margin:0 0 18px; padding-bottom: 15px!important; }
.iss-resource-card p { color:inherit; font-size:15px; line-height:1.45; margin:0 0 24px; max-width:320px; }

/* ===== Button ===== */
.iss-resource-button { display:inline-block; margin-top:auto; background:#071b1c; color:#ffffff !important; border-radius:4px; padding:11px 22px; font-size:13px; font-weight:800; line-height:1.2; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.iss-resource-button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,0.2); background:#000000; }

/* ===== Optional Dot Pattern ===== */
.iss-resource-card.iss-has-dots::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,0.16) 2px, transparent 3px); background-size:24px 24px; opacity:.75; pointer-events:none; z-index:1; }
.iss-resource-card.iss-has-dots::after { content:""; position:absolute; width:230px; height:230px; top:16px; right:20px; background-image:radial-gradient(circle, rgba(255,255,255,0.22) 8px, transparent 9px); background-size:30px 30px; opacity:.65; pointer-events:none; z-index:2; }
.iss-card-white.iss-has-dots::before { background-image:radial-gradient(circle, rgba(0,0,0,0.035) 2px, transparent 3px); }
.iss-card-white.iss-has-dots::after { background-image:radial-gradient(circle, rgba(0,0,0,0.045) 8px, transparent 9px); }

/* ===== Card Colors + Desktop Positions ===== */
.iss-card-teal { top:30px; left:0; background:#35d8d4; color:#062627; transform:rotate(-6deg); }
.iss-card-teal:hover { transform:rotate(-6deg) translateY(-8px); }
.iss-card-lime { top:0; left:32%; background:#dff51f; color:#102020; transform:rotate(2deg); }
.iss-card-lime:hover { transform:rotate(2deg) translateY(-8px); }
.iss-card-navy { top:28px; left:64%; background:#063747; color:#ffffff; transform:rotate(-2deg); }
.iss-card-navy:hover { transform:rotate(-2deg) translateY(-8px); }
.iss-card-orange { top:340px; left:1%; background:#ff6233; color:#102020; transform:rotate(0deg); }
.iss-card-orange:hover { transform:rotate(0deg) translateY(-8px); }
.iss-card-slate { top:305px; left:31%; background:#596985; color:#ffffff; transform:rotate(-6deg); }
.iss-card-slate:hover { transform:rotate(-6deg) translateY(-8px); }
.iss-card-white { top:340px; left:63%; background:#f7f7f5; color:#1e2a2a; transform:rotate(5deg); }
.iss-card-white:hover { transform:rotate(5deg) translateY(-8px); }
.iss-card-navy h3, .iss-card-slate h3 { color:#ffffff !important; }

/* ===== Small Desktop / Large Tablet Fix ===== */
@media only screen and (min-width:981px) and (max-width:1100px) {
  .iss-resource-cards { min-height:690px; }
  .iss-resource-card { height:330px; padding:30px; }
  .iss-resource-card h3 { font-size:clamp(22px,2vw,28px); line-height:1.08; margin-bottom:14px; }
  .iss-resource-card p { font-size:14px; line-height:1.4; margin-bottom:18px; }
  .iss-card-orange { top:345px; }
  .iss-card-slate { top:315px; }
  .iss-card-white { top:350px; }
}

/* ===== PinWheel ===== */
.iss-resource-card.iss-has-pinwheel::before { content:""; position:absolute; inset:0; background-image:url("/wp-content/uploads/asset_pinwheel_white-900.png"); background-repeat:no-repeat; background-position:35% 43%; background-size:500%; opacity:.24; pointer-events:none; z-index:1; }

.iss-card-inner { position:relative; z-index:3; }

.iss-card-teal.iss-has-pinwheel::before { opacity:.23; }
.iss-card-lime.iss-has-pinwheel::before { opacity:.45; }
.iss-card-navy.iss-has-pinwheel::before { opacity:.16; }
.iss-card-orange.iss-has-pinwheel::before { opacity:.2; }
.iss-card-slate.iss-has-pinwheel::before { opacity:.18; }
.iss-card-white.iss-has-pinwheel::before { opacity:.08; filter:invert(1); }

/* ===== Tablet - 2 Cards Per Row ===== */
@media only screen and (max-width:980px) {
  .iss-resource-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; min-height:0; padding:0; }
  .iss-resource-card, .iss-card-teal, .iss-card-lime, .iss-card-navy, .iss-card-orange, .iss-card-slate, .iss-card-white {
    position:relative; top:auto; left:auto; width:100%; height:310px;
  }
  .iss-card-teal { transform:rotate(-2deg); }
  .iss-card-lime { transform:rotate(1.5deg); }
  .iss-card-navy { transform:rotate(-1deg); }
  .iss-card-orange { transform:rotate(1deg); }
  .iss-card-slate { transform:rotate(-1.5deg); }
  .iss-card-white { transform:rotate(2deg); }
  .iss-card-teal:hover { transform:rotate(-2deg) translateY(-7px); }
  .iss-card-lime:hover { transform:rotate(1.5deg) translateY(-7px); }
  .iss-card-navy:hover { transform:rotate(-1deg) translateY(-7px); }
  .iss-card-orange:hover { transform:rotate(1deg) translateY(-7px); }
  .iss-card-slate:hover { transform:rotate(-1.5deg) translateY(-7px); }
  .iss-card-white:hover { transform:rotate(2deg) translateY(-7px); }
}

/* ===== Mobile - 1 Card Per Row ===== */
@media only screen and (max-width:767px) {
  .iss-resource-cards { grid-template-columns:1fr; gap:22px; }
  .iss-resource-card, .iss-card-teal, .iss-card-lime, .iss-card-navy, .iss-card-orange, .iss-card-slate, .iss-card-white {
    width:100%; height:300px; padding:28px; transform:none;
  }
  .iss-resource-card:hover, .iss-card-teal:hover, .iss-card-lime:hover, .iss-card-navy:hover, .iss-card-orange:hover, .iss-card-slate:hover, .iss-card-white:hover {
    transform:translateY(-5px);
  }
  .iss-resource-card.iss-has-dots::after { width:190px; height:190px; top:12px; right:12px; }
}