/* =========================================================
   Endorsement Grid — ShareAI
   ========================================================= */

.sae{
  /* colors */
  --grid-border: rgba(17, 24, 39, .08);
  --cell-bg: rgba(255, 255, 255, 0.384);
  --hover-bg: rgba(255,255,255,.90);
  --center-fg: #ffffff;
  --center-bg: #f0652059;

  --pulse-overlay: rgba(240,100,32,.20);   /* center radial ripple color+alpha */
  --pulse-trace: rgba(240, 101, 32, 0.116);     /* border “path” opacity */
  --trace-thickness: 2px;                  /* width of the colored border trace */

  /* pulse reach & softness (admin configurable) */
  --pulse-scale-end: 3;                    /* how far ripple travels (scale) */
  --pulse-blur: 28px;                      /* how diffused the ripple looks */

  /* sizing */
  --cell-pad: 16px;
  --cell-size: 153px;                      /* desktop brand tile = 153×153 */
  --pulse-dia: 160px;                      /* base diameter of ripple circle */
}

.sae-grid{ display:grid; gap:0; }
.sae-row{ width:100%; }

/* center text styles — apply on ALL breakpoints */
.sae-center .sae-center-title,
.sae-center .sae-center-hook{
  color:var(--center-fg);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  margin:0;
}

/* ---------- common center ripple (all breakpoints) ---------- */
.sae-center{
  position:relative;
  overflow:visible;
  z-index:5;                                /* keep radial ripple above neighbors */
}
.sae-center .sae-center-content{
  position:relative;
  z-index:2;                                /* text above ripple */
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Circular diffused pulse: a blurred circle that scales outwards */
.sae-center::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--pulse-dia);
  height:var(--pulse-dia);
  transform:translate(-50%, -50%) scale(0.6);
  border-radius:9999px;
  pointer-events:none;
  z-index:1;                                /* ripple under text but above neighbors */
  background:var(--pulse-overlay);          /* color+alpha from admin */
  filter:blur(var(--pulse-blur));
  opacity:0;                                /* animated */
}

/* JS toggles this class; duration comes from data-attrs via JS */
.sae-center.sae-center-pulse::after{
  animation: sae-center-wave 1800ms ease-out forwards;
}

/* Ripple travels up to --pulse-scale-end (admin) */
@keyframes sae-center-wave{
  0%   { opacity:.40; transform:translate(-50%, -50%) scale(0.6); }
  55%  { opacity:.22; transform:translate(-50%, -50%) scale(calc(var(--pulse-scale-end) * 0.7)); }
  100% { opacity:0;   transform:translate(-50%, -50%) scale(var(--pulse-scale-end)); }
}

/* ---------- desktop exact pixels ---------- */
@media (min-width:1024px){
  .sae{ --pulse-dia: var(--cell-size); }   /* base circle = one tile */

  .sae-grid{ width:max-content; margin-inline:auto; }

  .sae-row-top,
  .sae-row-bottom{ display:grid; grid-template-columns:repeat(8, var(--cell-size)); }

  .sae-row-middle{ display:grid; grid-template-columns:repeat(8, var(--cell-size)); }

  .sae-row-middle .sae-mid-left{
    grid-column:1 / span 3;
    display:grid;
    grid-template-columns:repeat(3, var(--cell-size));
  }

  .sae-row-middle .sae-center{
    grid-column:4 / span 2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(2 * var(--cell-size));      /* 306px */
    height:var(--cell-size);               /* 153px */
    min-width:calc(2 * var(--cell-size));  /* stable width when title↔hook swaps */
    text-align:center;
    padding:28px;

    /* brand block background (color + optional image via CSS vars) */
    background-color:var(--center-bg-color, var(--center-bg));
    background-image:var(--center-bg-image, none);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    /* keep interior grid lines continuous */
    border:1px solid var(--grid-border);
  }

  .sae-row-middle .sae-mid-right{
    grid-column:6 / span 3;
    display:grid;
    grid-template-columns:repeat(3, var(--cell-size));
  }

  .sae-cell{
    width:var(--cell-size);
    height:var(--cell-size);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--cell-pad);
    background:var(--cell-bg);
    transition:background-color .15s ease, border-color .25s ease;
  }
  .sae-cell:hover{ background:var(--hover-bg); }

  .sae-cell img{
    max-width:calc(var(--cell-size) - 2 * var(--cell-pad));
    max-height:calc(var(--cell-size) - 2 * var(--cell-pad) - 20px);
    width:auto;
    height:auto;
    object-fit:contain;
  }

  .sae-cell .brand-text{
    font-weight:600;
    letter-spacing:.1px;
    color:#111827;
  }

  /* interior lines only (no outer perimeter) */
  .sae-row-top .brand-item{ border-bottom:1px solid var(--grid-border); }
  .sae-row-top .brand-item:not(:nth-child(8n)){ border-right:1px solid var(--grid-border); }

  .sae-row-middle .brand-item{ border-top:1px solid var(--grid-border); border-bottom:1px solid var(--grid-border); }
  .sae-mid-left  .brand-item:not(:nth-child(3n)){ border-right:1px solid var(--grid-border); }
  .sae-mid-right .brand-item:not(:nth-child(3n)){ border-right:1px solid var(--grid-border); }

  .sae-row-bottom .brand-item{ border-top:1px solid var(--grid-border); }
  .sae-row-bottom .brand-item:not(:nth-child(8n)){ border-right:1px solid var(--grid-border); }
}

/* ---------- mobile / tablet (center stays centered; show 10 tiles) ---------- */
@media (max-width:1023.98px){
  /* Top & bottom rows: 4 columns, show first 4 tiles only */
  .sae-row-top,
  .sae-row-bottom{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
  .sae-row-top .brand-item:nth-child(n+5),
  .sae-row-bottom .brand-item:nth-child(n+5){
    display:none;
  }

  /* Middle row: 4 columns: [L][CENTER spans 2][R] */
  .sae-row-middle{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    align-items:stretch;
    gap:0;
  }

  .sae-row-middle .sae-mid-left{ grid-column:1 / span 1; display:block; }
  .sae-row-middle .sae-mid-right{ grid-column:4 / span 1; display:block; }

  /* show only first brand from each side group */
  .sae-row-middle .sae-mid-left .brand-item,
  .sae-row-middle .sae-mid-right .brand-item{ display:none; }
  .sae-row-middle .sae-mid-left .brand-item:first-child,
  .sae-row-middle .sae-mid-right .brand-item:first-child{ display:flex; }

  .sae-row-middle .sae-center{
    grid-column:2 / span 2;
    margin:0;
    padding:16px;
    min-height:96px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background-color:var(--center-bg-color, var(--center-bg));
    background-image:var(--center-bg-image, none);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    border:1px solid var(--grid-border);
  }

  .sae-cell{
    min-height:96px;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:var(--cell-bg);
    transition:background-color .15s ease, border-color .25s ease;
  }
  .sae-cell img{
    max-width:100%;
    max-height:56px;
    width:auto;
    height:auto;
    object-fit:contain;
  }

  /* Internal borders only (trim perimeter) */
  .sae-row-top .brand-item,
  .sae-row-bottom .brand-item,
  .sae-row-middle .sae-mid-left .brand-item:first-child,
  .sae-row-middle .sae-mid-right .brand-item:first-child,
  .sae-row-middle .sae-center{
    border:1px solid var(--grid-border);
  }
  .sae-row-top .brand-item{ border-top:none; }
  .sae-row-bottom .brand-item{ border-bottom:none; }
  .sae-row-top .brand-item:nth-child(4n + 1),
  .sae-row-bottom .brand-item:nth-child(4n + 1){ border-left:none; }
  .sae-row-top .brand-item:nth-child(4n),
  .sae-row-bottom .brand-item:nth-child(4n){ border-right:none; }
  .sae-row-middle .sae-mid-left .brand-item:first-child{ border-left:none; }
  .sae-row-middle .sae-mid-right .brand-item:first-child{ border-right:none; }
}

/* ---------- animations (border path) ---------- */
@keyframes sae-border-pulse{
  0%   { box-shadow: inset 0 0 0 0                      var(--pulse-trace); background-color: var(--cell-bg);   border-color: var(--grid-border); }
  35%  { box-shadow: inset 0 0 0 var(--trace-thickness) var(--pulse-trace); background-color: var(--hover-bg);  border-color: var(--pulse-trace); }
  65%  { box-shadow: inset 0 0 0 var(--trace-thickness) var(--pulse-trace); background-color: var(--hover-bg);  border-color: var(--pulse-trace); }
  100% { box-shadow: inset 0 0 0 0                      rgba(0,0,0,0);      background-color: var(--cell-bg);   border-color: var(--grid-border); }
}
.brand-item.pulse-now{ animation: sae-border-pulse 1200ms ease-out both; }