/* All code comments in English */

/* Vars for the fluid masonry algorithm */
:root{
  --rc-base-col: 99px; /* preferred min column width */
  --rc-gap: 20px;       /* gutter between items */
}

/* Section & header (as before) */
.section__resources-center { padding: 60px 0; }
.section__resources-center > * { font-family: 'Geist', sans-serif; }

.resources-header .resources-header__top {
  display:flex; align-items:center; gap:30px; margin-bottom:50px;
}
.resources-header .resources-header__top:after {
  content:""; flex:1; height:1px; background:#000; opacity:.2;
}
.resources-title { font-size:38px; color:#2A1C4A; }
.resources-subtitle { margin-bottom:40px; font-size:18px; color:#2A1C4A; opacity:.5; }

/* ===== FLUID MASONRY (absolute positioning) ===== */
.resources-masonry{
  position: relative; /* containing block for items */
  min-height: 100px;
}

.masonry-item{
  position: absolute;
  top: 0; left: 0;
  /* JS sets: width, left, top */
  will-change: top,left,width;
}

/* Card visuals */
.resource-card{
  border: 1px solid #262365;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 2px 4px rgba(0,0,0,.45);
  overflow: hidden;
  background: #fff;
  height: auto; /* auto height – critical */
}

.resource-image{ width: 100%; display:block; }
.resource-image img{
  display:block; width:100%; height:auto; object-fit: contain; background:#fff;
}

.resource-info{ padding: 16px; display:flex; flex-direction:column; }
.resource-title{ font-size:16px; font-weight:600; margin-bottom:8px; color:#2A1C4A; }

.resource-buttons{ display:flex; flex-wrap:wrap; gap:10px; }
.resource-btn{
  padding:10px 18px; border-radius: 2000px;
  display:inline-flex; gap:6px; align-items:center; justify-content:center;
  border:1px solid #3b11a2; font-weight:600; font-size:14px; text-decoration:none;
}
.resource-btn--main{ background:#3b11a2; color:#fff; }
.resource-btn--secondary{ background:transparent; color:#3b11a2; }


.resource-btn--preview {
    padding: 11px 12px 13px;
}

/* Footer CTA */
.resources-center-btn{
  padding:15px 50px; display:inline-flex; justify-content:center; align-items:center;
  background:#3b11a2; color:#fff; border-radius:2000px; margin-top:40px; font-size:16px; font-weight:600; gap:5px;
}

/* ===== Lightbox ===== */
.resource-image.open-lightbox{
  position:fixed; inset:0; display:flex; justify-content:center; align-items:center;
  z-index: 999999999; background: rgb(0 0 0 / 70%);
  opacity:0; transition: opacity .25s ease; overflow:auto;
}
.resource-image.open-lightbox.visible{ opacity:1; }
.resource-image.open-lightbox img{
  cursor: zoom-in; transition: transform .25s ease;
  width:auto; max-width:90vw; max-height:90vh; height:auto;
}
.resource-image.open-lightbox img.zoomed{ transform: scale(2); cursor: zoom-out; }
.resource-image.open-lightbox .lightbox-hint{
  position:absolute; top:20px; right:25px; font-size:28px; color: rgba(255,255,255,.8); cursor:pointer;
}

/* ===== Code modal ===== */
.code-lightbox{
  position:fixed; inset:0; background: rgba(0,0,0,.6); display:flex; justify-content:center; align-items:center;
  z-index: 99999999; opacity:0; transition: opacity .25s ease;
}
.code-lightbox.visible{ opacity:1; }
.code-lightbox__inner{
  position:relative; background:#fff; border-radius:8px; padding:1.5rem; width:90%;
  max-width:520px; max-height:80vh; overflow:auto; box-shadow:0 0 40px rgba(0,0,0,.2);
}
.code-lightbox__close{ position:absolute; top:14px; right:20px; background:none; border:none; font-size:22px; cursor:pointer; }
.code-lightbox__code{
  background:#f5f5f7; border:1px solid #ddd; padding:10px; border-radius:6px; font-family:monospace;
  color:#333; font-size:.9rem; white-space:pre-wrap; word-break:break-word;

  code {
    display:block!important;
  }
}
.copy-code-btn{
  display:inline-block; margin-top:12px; background:#3b11a2; color:#fff; border:none; padding:12px 24px;
  border-radius:20000px; font-size:.85rem; cursor:pointer;
}
.copy-code-btn.copied{ background:#4caf50; }

/* Masonry container context */
.resources-masonry { position: relative; }
/* Items are absolutely positioned by JS */
.masonry-item { position: absolute; top: 0; left: 0; }

/* Filter block */
.resources-filter { margin-bottom: 18px; }
.resources-filter__label {
  display:block; font-weight:700; color:#221752; margin-bottom:8px; font-size:22px;
}

/* Custom select shell */
.resources-select {
  position: relative;
  display: inline-block;
  /*width: 100%;*/
  /*max-width: 560px;*/ /* adjust if needed */
  border: 2px solid #221752;
  border-radius: 14px;
  padding: 18px 48px 18px 24px;
  box-shadow: 0 2px 0 0 rgba(34,23,82,.35);
  background:#fff;
}

/* Native select */
.resources-select__field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 20px;
  line-height: 1.2;
  color: #221752;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
}

/* Caret icon */
.resources-select__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #221752;
  font-size: 22px;
  line-height: 1;
}

/* (Optional) focus ring */
.resources-select:has(.resources-select__field:focus-visible) {
  outline: 3px solid #c9c3ff;
  outline-offset: 2px;
}

/* Animate position/size + show/hide effects */
.masonry-item{
  transition:
    left .25s ease,
    top .25s ease,
    width .25s ease,
    opacity .18s ease,
    transform .18s ease;
}

/* Start/End states for filter animations */
.masonry-item.is-hiding,
.masonry-item.filter-hide {
  opacity: 0;
  transform: scale(.98);
}

.masonry-item.filter-enter {
  opacity: 0;
  transform: translateY(10px) scale(.98);
}

.masonry-item.filter-enter-active {
  opacity: 1;
  transform: none;
}