/* BibliaREM Maps Platform — G11 responsive/theme/header alignment fixes */

/* Keep both carousels visually centered inside their cards. */
.br-maps-page .maps-slider{
  width:min(96%, 1040px);
  margin-left:auto!important;
  margin-right:auto!important;
}
.br-maps-page .maps-slider__viewport{
  width:100%;
  margin-inline:auto;
}

/* Maps follows the shared shell appearance instead of forcing a dark-only page. */
.br-maps-page{
  --maps-page-surface:
    radial-gradient(circle at 22% 0%,rgba(18,82,113,.18),transparent 34rem),
    radial-gradient(circle at 88% 10%,rgba(153,102,23,.12),transparent 30rem),
    #020d16;
  --maps-card-surface:linear-gradient(150deg,rgba(6,27,43,.98),rgba(3,14,24,.98));
  --maps-classic-surface:linear-gradient(150deg,rgba(22,24,24,.98),rgba(9,14,18,.98));
  --maps-feature-surface:linear-gradient(180deg,rgba(9,39,59,.82),rgba(5,25,40,.82));
  --maps-feature-classic-surface:linear-gradient(180deg,rgba(44,36,21,.75),rgba(19,20,18,.76));
  --maps-future-surface:linear-gradient(100deg,rgba(16,24,30,.95),rgba(4,15,24,.95));
  --maps-future-card-surface:rgba(4,15,24,.62);
  --maps-future-visual-surface:linear-gradient(145deg,#253344,#151f27);
  --maps-body-text:#f4f7fa;
  --maps-copy:#d4dce2;
  --maps-lead:#c8d0d6;
  --maps-muted-local:#9fb2c1;
  --maps-shadow-local:0 22px 64px rgba(0,0,0,.35);
}

html[data-theme="light"] body.br-maps-page{
  --maps-page-surface:
    radial-gradient(circle at 18% 0%,rgba(73,183,224,.15),transparent 32rem),
    radial-gradient(circle at 88% 8%,rgba(214,166,76,.17),transparent 28rem),
    linear-gradient(180deg,#fbf7ef 0%,#f4ecdf 55%,#eee3d4 100%);
  --maps-card-surface:linear-gradient(150deg,rgba(255,255,255,.96),rgba(239,249,253,.97));
  --maps-classic-surface:linear-gradient(150deg,rgba(255,252,244,.98),rgba(246,238,222,.98));
  --maps-feature-surface:linear-gradient(180deg,rgba(238,249,253,.96),rgba(226,243,249,.96));
  --maps-feature-classic-surface:linear-gradient(180deg,rgba(252,247,235,.98),rgba(244,234,214,.98));
  --maps-future-surface:linear-gradient(100deg,rgba(255,252,245,.96),rgba(238,247,250,.96));
  --maps-future-card-surface:rgba(255,255,255,.72);
  --maps-future-visual-surface:linear-gradient(145deg,#e6eef1,#d8e1e4);
  --maps-body-text:#152635;
  --maps-copy:#314653;
  --maps-lead:#415661;
  --maps-muted-local:#61747f;
  --maps-shadow-local:0 18px 50px rgba(55,72,82,.14);
}

@media (prefers-color-scheme:light){
  html[data-theme="auto"] body.br-maps-page{
    --maps-page-surface:
      radial-gradient(circle at 18% 0%,rgba(73,183,224,.15),transparent 32rem),
      radial-gradient(circle at 88% 8%,rgba(214,166,76,.17),transparent 28rem),
      linear-gradient(180deg,#fbf7ef 0%,#f4ecdf 55%,#eee3d4 100%);
    --maps-card-surface:linear-gradient(150deg,rgba(255,255,255,.96),rgba(239,249,253,.97));
    --maps-classic-surface:linear-gradient(150deg,rgba(255,252,244,.98),rgba(246,238,222,.98));
    --maps-feature-surface:linear-gradient(180deg,rgba(238,249,253,.96),rgba(226,243,249,.96));
    --maps-feature-classic-surface:linear-gradient(180deg,rgba(252,247,235,.98),rgba(244,234,214,.98));
    --maps-future-surface:linear-gradient(100deg,rgba(255,252,245,.96),rgba(238,247,250,.96));
    --maps-future-card-surface:rgba(255,255,255,.72);
    --maps-future-visual-surface:linear-gradient(145deg,#e6eef1,#d8e1e4);
    --maps-body-text:#152635;
    --maps-copy:#314653;
    --maps-lead:#415661;
    --maps-muted-local:#61747f;
    --maps-shadow-local:0 18px 50px rgba(55,72,82,.14);
  }
}

body.br-maps-page{
  background:var(--maps-page-surface)!important;
  color:var(--maps-body-text)!important;
}
.br-maps-page .maps-choice{
  background:var(--maps-card-surface)!important;
  box-shadow:var(--maps-shadow-local),inset 0 1px rgba(255,255,255,.12)!important;
}
.br-maps-page .maps-choice--classic{background:var(--maps-classic-surface)!important}
.br-maps-page .maps-choice__lead{color:var(--maps-lead)!important}
.br-maps-page .maps-benefits{color:var(--maps-copy)!important}
.br-maps-page .maps-feature{background:var(--maps-feature-surface)!important}
.br-maps-page .maps-feature--classic{background:var(--maps-feature-classic-surface)!important}
.br-maps-page .maps-future{background:var(--maps-future-surface)!important}
.br-maps-page .maps-future-card{background:var(--maps-future-card-surface)!important}
.br-maps-page .maps-future-card__visual{background:var(--maps-future-visual-surface)!important}
.br-maps-page .maps-future__heading p,
.br-maps-page .maps-future-card p,
.br-maps-page .maps-member-note{color:var(--maps-muted-local)!important}

/* Light-mode contrast refinements; preview artwork intentionally keeps its own map palette. */
html[data-theme="light"] body.br-maps-page .maps-choice h2,
html[data-theme="light"] body.br-maps-page .maps-future-card h3{color:#172b3a}
html[data-theme="light"] body.br-maps-page .maps-choice--classic h2{color:#3b3021}
html[data-theme="light"] body.br-maps-page .maps-feature{color:#203745;border-color:rgba(31,142,183,.3)}
html[data-theme="light"] body.br-maps-page .maps-feature--classic{color:#493a24;border-color:rgba(174,126,39,.31)}
html[data-theme="light"] body.br-maps-page .maps-future{border-color:rgba(173,125,39,.3)}
html[data-theme="light"] body.br-maps-page .maps-future h2{color:#775619}
html[data-theme="light"] body.br-maps-page .maps-slider__dot{border-color:rgba(32,48,60,.3)}

@media (prefers-color-scheme:light){
  html[data-theme="auto"] body.br-maps-page .maps-choice h2,
  html[data-theme="auto"] body.br-maps-page .maps-future-card h3{color:#172b3a}
  html[data-theme="auto"] body.br-maps-page .maps-choice--classic h2{color:#3b3021}
  html[data-theme="auto"] body.br-maps-page .maps-feature{color:#203745;border-color:rgba(31,142,183,.3)}
  html[data-theme="auto"] body.br-maps-page .maps-feature--classic{color:#493a24;border-color:rgba(174,126,39,.31)}
  html[data-theme="auto"] body.br-maps-page .maps-future{border-color:rgba(173,125,39,.3)}
  html[data-theme="auto"] body.br-maps-page .maps-future h2{color:#775619}
  html[data-theme="auto"] body.br-maps-page .maps-slider__dot{border-color:rgba(32,48,60,.3)}
}

/* The Maps page must use the same desktop language-button presentation as the shared shell. */
@media (min-width:760px){
  .br-maps-page .language-button .language-name-full{display:inline!important}
  .br-maps-page .language-button .language-name-short{display:none!important}
}

/* Portrait phones/tablets: the two map experiences stack. */
@media (orientation:portrait) and (max-width:1180px){
  .br-maps-page .maps-choice-grid{grid-template-columns:1fr!important;min-height:0!important}
  .br-maps-page .maps-choice--3d{order:1}
  .br-maps-page .maps-choice--classic{order:2}
  .br-maps-page .maps-slider{width:100%}
  .br-maps-page .maps-slider--3d .maps-slider__viewport,
  .br-maps-page .maps-slider--classic .maps-slider__viewport{aspect-ratio:1.72/1}
}

/* Landscape mobile: preserve the desktop two-choice concept when there is enough width. */
@media (orientation:landscape) and (min-width:740px) and (max-width:980px) and (max-height:650px){
  .br-maps-page .maps-app{width:calc(100% - 14px);padding-top:8px}
  .br-maps-page .maps-choice-grid{grid-template-columns:minmax(0,58fr) minmax(0,42fr)!important;gap:8px!important;min-height:0!important}
  .br-maps-page .maps-choice{padding:10px;border-radius:14px}
  .br-maps-page .maps-choice h2{font-size:1.35rem}
  .br-maps-page .maps-choice--classic h2{font-size:1.25rem}
  .br-maps-page .maps-access,.br-maps-page .maps-choice__lead{font-size:.68rem}
  .br-maps-page .maps-slider{width:100%;margin-bottom:.36rem}
  .br-maps-page .maps-slider__viewport{min-height:120px!important;max-height:170px!important;aspect-ratio:1.9/1!important}
  .br-maps-page .maps-feature{min-height:34px;font-size:.62rem;padding:.2rem .25rem}
  .br-maps-page .maps-feature__icon{width:20px;height:20px;flex-basis:20px}
  .br-maps-page .maps-feature__icon svg{width:19px;height:19px}
  .br-maps-page .maps-benefits{font-size:.59rem;line-height:1.15}
  .br-maps-page .maps-cta{min-height:38px;font-size:.86rem}
  .br-maps-page .maps-future{margin-bottom:58px}
}

@media (max-width:520px){
  .br-maps-page .maps-slider{width:100%}
}