/* Square (1:1) card variant — exhibitor-profile.php's "Who Should Attend" grid */
.visitors-container--square {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .visitors-container--square { grid-template-columns: repeat(2, 1fr); }}

@media (max-width: 560px) {
    .visitors-container--square { grid-template-columns: 1fr; }}

.as-meta-chip--highlight {
    background: rgba(20, 83, 188, 0.06);
    border-color: rgba(20, 83, 188, 0.25);
    color: var(--brand-blue);
}

.as-meta-chip--highlight:hover { border-color: var(--brand-blue); }

/* --- Product Areas section header: centered, same override pattern
   #partners/#exhibitors/#gallery already use in common.css --- */
#pa-glance .section-header {
    text-align: center;
    max-width: none;
    margin-inline: auto;
}

#pa-glance .section-header h2 { text-align: center; }

#pa-glance .section-header p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

/* #pa-glance is this page's very first section — no hero/intro sits above
   it, unlike .as-section-spaced's normal role as spacing between two
   sections that already follow a header-clearing hero. Its flat
   padding-top dips below the fixed header's height (--nav-height, 66px)
   at these two breakpoints (64px/56px), letting the header clip the
   heading's top row on mobile. Bumped to the same nav-height-aware
   buffer .as-intro-section already uses at these sizes. */
@media (max-width: 768px) {
    #pa-glance.as-section-spaced { padding-top: calc(var(--nav-height) + 32px); }
}

@media (max-width: 600px) {
    #pa-glance.as-section-spaced { padding-top: calc(var(--nav-height) + 24px); }
}

/* Product Areas grid (.pa-grid/.pa-card) moved to css/common.css — it's
   shared with visitor-product-category.php's matching "Product Categories"
   section, same reuse pattern as .as-pillar-grid/.as-pillar-card. */

/* Compact CTA bar component (icon + heading + buttons) now lives in
   css/common.css — shared with exhibitor-market-insights.php. Its
   small-screen stacking rules moved into common.css's shared 600px
   breakpoint block alongside it. */

/* About Summit "Gallery" section — transplanted from the homepage's Event
   Gallery (index.php / css/pages/index.css): same lazy-loaded grid fed by
   EGN_ConnectX_gallery.php, same mobile "Load More" slice behavior. */
.gallery-grid {
    display: grid;
    gap: 6px;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 280px;
    grid-auto-flow: dense;
    min-height: 280px;
}

.gallery-item { overflow: hidden; border-radius: 12px; height: 100%; }

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.4s ease;
    object-fit: cover;
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-load-more-wrapper { text-align: center; margin-top: 20px; }

@media (max-width: 600px) {
    .gallery-item--hidden { display: none; }
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .gallery-item img { width: 100%; }}

/* "Where to Find Us" — centered section header, matching the pattern
   already used by visitor-profile.php's #visit-us section. */
#visit-us .section-header {
    text-align: center;
    max-width: none;
    margin-inline: auto;
}

#visit-us .section-header h2 { text-align: center; }

#visit-us .section-header p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Grid-blowout guard for the Maps iframe: .as-location-map-wrap is a
   common.css grid item (shared with visitor-profile.php/about-egn-india.php)
   but ships without min-width:0, so the iframe's default intrinsic width
   can force the .as-location-grid track wider than its container on narrow
   viewports (same documented gotcha already fixed once on
   contact-international-agency.php's map columns). Scoped here via #visit-us
   rather than editing common.css directly. */
#visit-us .as-location-map-wrap {
    min-width: 0;
}