/* =========================================================
   Sidi Bernoussi Digital Portal — Professional Responsive UI
   September 2026
   Purpose: fluid screen fit, no page-level horizontal scroll,
   improved card rhythm, desktop density, tablet/mobile polish.
   ========================================================= */

:root{
  --container-max:1600px;
  --page-gutter:clamp(18px,3.4vw,64px);
  --card-shadow:0 12px 34px rgba(28,31,35,.065);
  --card-shadow-hover:0 22px 52px rgba(28,31,35,.115);
}

html,body{width:100%;max-width:100%;}
body{overflow-x:clip;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;}
main{width:100%;max-width:100%;overflow-x:clip;}
img,svg,video,iframe{max-width:100%;}
img{height:auto;}
section,header,footer,.brand-banner,.top-alert{max-width:100%;}

/* Fluid container: uses the screen better on 1440p/4K while preserving readable gutters. */
.container{
  width:min(var(--container-max),calc(100% - (var(--page-gutter) * 2)));
  max-width:100%;
  margin-inline:auto;
}

/* Grid/flex children must be allowed to shrink instead of forcing page overflow. */
.hero-grid>*,.two-col>*,.gov-grid>*,.economy-highlight>*,.legal-grid>*,
.contact-grid>*,.real-places-grid>*,.visual-grid>*,.complete-guide-grid>*,
.guide-intro-grid>*,.guide-stat-grid>*,.portal-actions-grid>*,.emergency-card-grid>*,
.neighborhood-grid>*,.digital-grid>*,.mobility-grid>*,.community-grid>*,
.museum-gallery>*,.org-grid>*,.sports-hero-pro>*,.sports-club-story>*,
.sports-legends-grid>*,.sports-builders-grid>*,.sports-timeline>*,.sports-now>*,
.people-grid-pro>*,.names-grid>*,.service-grid>*{min-width:0;}

h1,h2,h3,h4,p,a,span,small,strong,li{overflow-wrap:break-word;}
pre,code{max-width:100%;overflow:auto;}

/* More refined global rhythm. */
.section{padding-block:clamp(64px,5.4vw,94px);}
.section-heading{max-width:880px;margin-bottom:clamp(26px,2.6vw,40px);}
.section-heading h2{font-size:clamp(2rem,3.1vw,3.45rem);line-height:1.04;}
.section-heading p:not(.eyebrow){max-width:78ch;}

/* Header: keep the identity strong without consuming too much vertical space. */
.brand-banner-inner{min-height:clamp(118px,10vw,158px);padding:10px 0 8px;}
.header-logo{width:min(800px,82vw);max-height:150px;}
.site-header .nav-under-logo{min-height:62px;padding-block:8px;}
.site-header .primary-nav{gap:5px 7px;}
.site-header .primary-nav a{
  min-height:38px;
  padding:8px 10px;
  border:1px solid transparent;
  font-size:clamp(.76rem,.68vw,.86rem);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.site-header .primary-nav a:hover,
.site-header .primary-nav a:focus-visible{
  background:#faf4eb;
  border-color:#eadfce;
  color:var(--maroon);
  transform:translateY(-1px);
}

/* Hero becomes broader and calmer on large displays. */
.hero{padding-block:clamp(58px,5vw,88px);}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);gap:clamp(34px,4vw,72px);}
.hero h1{font-size:clamp(2.8rem,4.45vw,5.2rem);max-width:12ch;}
.hero-lead{font-size:clamp(1.03rem,1.05vw,1.22rem);max-width:72ch;}
.hero-card{border-radius:30px;padding:16px;box-shadow:0 24px 64px rgba(42,34,27,.11);}
.premium-hero-photo,.hero-photo{overflow:hidden;border-radius:22px;}

/* Professional editorial card treatment. */
.visual-card,.place-card,.service-card,.guide-card,.person-card,.people-card-pro,
.org-card,.neighborhood-card,.portal-action,.sports-legend-card,.sports-time-item,
.profile-card,.council-card,.scope-card{
  box-shadow:var(--card-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.visual-card:hover,.place-card:hover,.guide-card:hover,.person-card:hover,.people-card-pro:hover,
.org-card:hover,.neighborhood-card:hover,.portal-action:hover,.sports-legend-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--card-shadow-hover);
}

/* Use 4 columns on wide screens so cards fill modern desktop displays. */
@media(min-width:1420px){
  .visual-grid,.real-places-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
  .complete-guide-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
  .service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
  .people-grid-pro{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
  .history-deep-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .portal-actions-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .digital-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .neighborhood-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .sector-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}

/* Keep editorial feature cards intentional. */
.visual-card.featured,.place-card.large{grid-column:span 2;}
.visual-card img,.place-card img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.visual-card figcaption,.place-card figcaption,.service-card-inner{padding:20px;}
.place-card figcaption{display:flex;flex-direction:column;flex:1;}
.place-card .inline-map,.place-card .photo-credit{margin-top:auto;padding-top:14px;}
.place-card h3,.visual-card h3{line-height:1.28;}

/* Tables stay inside their card instead of widening the whole document. */
.stats-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.stats-table{min-width:720px;}

/* Forms and long links should never force a wider viewport. */
input,textarea,select,button{max-width:100%;}
.contact-form,.upload-zone,.service-actions,.result-links,.sports-link-row{min-width:0;}
.contact-section a,.site-footer a,.source-list a,.history-source-links a{word-break:break-word;}
.hp-field{left:0!important;transform:translateX(-200vw)!important;}

/* Internal horizontal scrollers remain usable, while page-level overflow is eliminated. */
.emergency-strip,.guide-toolbar,.museum-storyline,.history-filter-row,.filter-row{
  max-width:100%;
  overscroll-behavior-inline:contain;
}

/* Floating UI additions. */
.scroll-progress{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:3px;
  z-index:2000;
  pointer-events:none;
  background:transparent;
}
.scroll-progress>span{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--maroon),#c79b4a);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}
body[dir="rtl"] .scroll-progress>span{transform-origin:right center;}

.back-to-top{
  position:fixed;
  right:clamp(14px,2vw,28px);
  bottom:clamp(14px,2vw,28px);
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:rgba(30,31,33,.9);
  color:#fff;
  box-shadow:0 12px 32px rgba(0,0,0,.2);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:1200;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background .2s ease;
  backdrop-filter:blur(12px);
}
.back-to-top.visible{opacity:1;visibility:visible;transform:none;}
.back-to-top:hover{background:var(--maroon);}
body[dir="rtl"] .back-to-top{right:auto;left:clamp(14px,2vw,28px);}

/* Laptop / tablet: avoid tight 3-column layouts. */
@media(max-width:1180px){
  :root{--page-gutter:clamp(16px,2.4vw,30px);}
  .hero-grid{grid-template-columns:1fr 1fr;gap:30px;}
  .gov-grid{grid-template-columns:1fr 1fr;}
  .profile-card{grid-column:1/-1;}
  .visual-grid,.real-places-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .visual-card.featured,.place-card.large{grid-column:span 2;}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:1060px){
  .brand-banner-inner{min-height:108px;}
  .header-logo{width:min(660px,86vw);max-height:112px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-copy{max-width:860px;}
  .hero h1{max-width:14ch;}
  .hero-card{max-width:820px;width:100%;margin-inline:auto;}
  .site-header .nav-under-logo{display:flex;}
  .site-header .primary-nav{max-width:calc(100vw - 24px);}
  .guide-intro-grid,.history-source-panel{grid-template-columns:1fr;}
}

@media(max-width:760px){
  :root{--page-gutter:14px;}
  .container{width:calc(100% - 28px);}
  .brand-banner-inner{min-height:auto;padding:6px 0;}
  .header-logo{width:min(94vw,560px);max-height:96px;}
  .top-alert{font-size:.76rem;}
  .emergency-strip{gap:12px;padding-block:8px;}
  .site-header .nav-under-logo{min-height:56px;}
  .hero{padding-block:46px 56px;}
  .hero h1{font-size:clamp(2.35rem,11vw,3.35rem);}
  .hero-actions{gap:9px;}
  .hero-actions .btn{flex:1 1 100%;}
  .premium-badges{display:grid;grid-template-columns:1fr;}
  .fact-grid{grid-template-columns:1fr 1fr;}
  .section{padding-block:58px;}
  .section-heading h2{font-size:clamp(1.9rem,8.5vw,2.55rem);}
  .visual-grid,.real-places-grid,.service-grid,.gov-grid,.complete-guide-grid,
  .guide-stat-grid,.people-grid-pro,.names-grid,.portal-actions-grid,.digital-grid,
  .neighborhood-grid,.org-grid,.museum-gallery,.sports-legends-grid,
  .sports-builders-grid,.sports-timeline{grid-template-columns:1fr!important;}
  .visual-card.featured,.place-card.large,.profile-card{grid-column:auto;}
  .visual-card img,.place-card img,.place-card.large img{aspect-ratio:16/9;min-height:0!important;}
  .verified-photo img{min-height:0!important;}
  .compare-cards,.economy-highlight,.legal-options,.footer-grid,.then-now-grid{grid-template-columns:1fr;}
  .sports-stat-strip{grid-template-columns:1fr 1fr;}
  .sports-club-card{grid-template-columns:1fr;}
  .sports-now{padding:22px;}
  .footer-bottom{align-items:flex-start;}
}

@media(max-width:480px){
  :root{--page-gutter:10px;}
  .container{width:calc(100% - 20px);}
  .header-logo{width:96vw;max-height:82px;}
  .site-header .menu-toggle{min-width:74px;}
  .fact-grid,.sports-stat-strip,.museum-summary{grid-template-columns:1fr;}
  .place-card,.visual-card,.guide-card,.service-card,.portal-action,.org-card{border-radius:18px;}
  .visual-card figcaption,.place-card figcaption,.service-card-inner{padding:17px;}
  .guide-callout{padding:20px;}
  .back-to-top{width:42px;height:42px;border-radius:12px;}
}

@media(prefers-reduced-motion:reduce){
  .scroll-progress>span,.back-to-top,.visual-card,.place-card,.guide-card,.people-card-pro{transition:none!important;}
}