.pgi-gab-section{--pgi-gab-cols:4;--pgi-gab-tablet:2;--pgi-gab-mobile:1;--pgi-gab-card-min:240px;margin:32px 0;max-width:100%;width:100%;box-sizing:border-box;container-type:inline-size}
.pgi-gab-section *{box-sizing:border-box}
.pgi-gab-head{margin:0 0 16px;text-align:right}
.pgi-gab-head h2{margin:0 0 6px;font-size:clamp(20px,2vw,28px);line-height:1.5}
.pgi-gab-head p{margin:0;color:#667085;line-height:1.8}

/* Grid mode */
.pgi-gab-grid{display:grid;grid-template-columns:repeat(var(--pgi-gab-cols),minmax(0,1fr));gap:14px;align-items:stretch;max-width:100%}
.pgi-gab-mode-grid .pgi-gab-grid{grid-template-columns:repeat(var(--pgi-gab-cols),minmax(min(100%,var(--pgi-gab-card-min)),1fr))}

/* Cards */
.pgi-gab-card{min-width:0;border:1px solid #e4e7ec;border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 5px 18px rgba(16,24,40,.05)}
.pgi-gab-image{display:block;aspect-ratio:4/3;background:#f5f7fa;overflow:hidden}
.pgi-gab-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.pgi-gab-card:hover .pgi-gab-image img{transform:scale(1.025)}
.pgi-gab-body{padding:12px;display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.pgi-gab-body h3{font-size:14px;line-height:1.75;margin:0;overflow-wrap:anywhere}
.pgi-gab-body h3 a{color:inherit;text-decoration:none}
.pgi-gab-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:#667085;font-size:12px;line-height:1.7}
.pgi-gab-meta strong{color:#101828;font-size:13px}
.pgi-gab-button{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 11px;border-radius:9px;background:#1f4f8f;color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:700;text-align:center}

/* Horizontal rail: each ad stays readable instead of shrinking into narrow columns. */
.pgi-gab-mode-scroll .pgi-gab-grid{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding:2px 1px 10px;scrollbar-width:thin}
.pgi-gab-mode-scroll .pgi-gab-card{flex:0 0 100%;width:100%;max-width:100%;scroll-snap-align:start;scroll-snap-stop:always}

/* Auto mode uses the actual container width, not viewport width. This is important for sidebars. */
@container (max-width: 560px){
  .pgi-gab-mode-auto .pgi-gab-grid{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding:2px 1px 10px;scrollbar-width:thin}
  .pgi-gab-mode-auto .pgi-gab-card{flex:0 0 100%;width:100%;max-width:100%;scroll-snap-align:start;scroll-snap-stop:always}
}

@media(max-width:900px){
  .pgi-gab-mode-grid .pgi-gab-grid,.pgi-gab-mode-auto .pgi-gab-grid{grid-template-columns:repeat(var(--pgi-gab-tablet),minmax(0,1fr))}
}
@media(max-width:600px){
  .pgi-gab-section{margin:24px 0}
  .pgi-gab-mode-grid .pgi-gab-grid,.pgi-gab-mode-auto .pgi-gab-grid{grid-template-columns:repeat(var(--pgi-gab-mobile),minmax(0,1fr));gap:10px}
  .pgi-gab-card{border-radius:12px}
  .pgi-gab-body{padding:10px}
}

/* Fallback for browsers without container queries: viewport-small layouts still become a rail in auto mode. */
@supports not (container-type:inline-size){
  @media(max-width:600px){
    .pgi-gab-mode-auto .pgi-gab-grid{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px}
    .pgi-gab-mode-auto .pgi-gab-card{flex:0 0 100%;width:100%;max-width:100%;scroll-snap-align:start}
  }
}