/* =========================================================
   34TH INFANTRY DIVISION
   MAP ROOM / BATTLEFIELD LIBRARY
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

body.map-room-page {
  min-height: 100vh;

  margin: 0;

  background:
    #070907;

  color:
    #d8d3be;
}


.map-room-shell {
  min-height: 100vh;

  padding-top:
    68px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

body.map-room-page
.war-room-nav {
  height:
    68px !important;

  grid-template-columns:
    260px minmax(0, 1fr) 90px !important;

  gap:
    20px !important;

  padding:
    0 22px !important;
}


body.map-room-page
.war-room-brand {
  height:
    68px !important;

  gap:
    10px !important;
}


body.map-room-page
.war-room-brand img {
  width:
    44px !important;

  height:
    44px !important;
}


body.map-room-page
.war-room-brand-text strong {
  font-size:
    .61rem !important;

  letter-spacing:
    .09em !important;
}


body.map-room-page
.war-room-brand-text span {
  margin-top:
    3px !important;

  font-size:
    .39rem !important;

  letter-spacing:
    .24em !important;
}


body.map-room-page
.war-room-nav-links {
  height:
    68px !important;

  gap:
    clamp(20px, 2.5vw, 38px) !important;
}


body.map-room-page
.war-room-nav-links a {
  height:
    68px !important;

  font-size:
    .56rem !important;

  letter-spacing:
    .09em !important;
}


body.map-room-page
.war-room-nav-links a.active::after {
  width:
    58px !important;
}


body.map-room-page
.war-room-sign-out {
  width:
    86px !important;

  min-width:
    86px !important;

  height:
    38px !important;

  padding:
    0 10px !important;

  font-size:
    .52rem !important;
}


/* =========================================================
   HERO
   ========================================================= */

.map-room-hero {
  position:
    relative;

  min-height:
    210px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  border-bottom:
    1px solid rgba(181, 175, 135, .16);

  background:
    #090b08;
}


.map-room-hero-background {
  position:
    absolute;

  inset:
    0;

  background:
    url("../images/war-room-hero.png")
    center 55% / cover
    no-repeat;

  opacity:
    .42;

  transform:
    scale(1.02);
}


.map-room-hero-overlay {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(4, 6, 4, .97) 0%,
      rgba(4, 6, 4, .82) 42%,
      rgba(4, 6, 4, .45) 72%,
      rgba(4, 6, 4, .72) 100%
    );
}


.map-room-hero-content {
  position:
    relative;

  z-index:
    2;

  width:
    min(1220px, calc(100% - 54px));

  margin:
    0 auto;

  padding:
    34px 0;
}


.map-room-hero-content .eyebrow {
  margin:
    0 0 7px;

  color:
    #9ca773;

  font-size:
    .53rem;

  font-weight:
    900;

  letter-spacing:
    .23em;

  text-transform:
    uppercase;
}


.map-room-hero h1 {
  margin:
    0 0 9px;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size:
    clamp(2.8rem, 5vw, 4.5rem);

  line-height:
    .9;

  letter-spacing:
    .035em;

  color:
    #eee5ca;

  text-transform:
    uppercase;
}


.map-room-hero-content > p:last-child {
  max-width:
    600px;

  margin:
    0;

  color:
    #999d91;

  font-size:
    .76rem;

  line-height:
    1.55;
}


/* =========================================================
   MAP LIBRARY SECTION
   ========================================================= */

.map-library-section {
  width:
    min(1220px, calc(100% - 54px));

  margin:
    0 auto;

  padding:
    30px 0 20px;
}


.map-library-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    18px;
}


.map-library-heading .eyebrow {
  margin:
    0;

  color:
    #929b6c;

  font-size:
    .5rem;

  font-weight:
    900;

  letter-spacing:
    .22em;

  text-transform:
    uppercase;
}


.map-library-heading h2 {
  margin:
    4px 0 0;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size:
    clamp(2rem, 3vw, 2.7rem);

  line-height:
    .95;

  letter-spacing:
    .025em;

  color:
    #ddd7c1;

  text-transform:
    uppercase;
}


.map-library-description {
  max-width:
    420px;

  margin:
    0;

  color:
    #777c70;

  font-size:
    .68rem;

  line-height:
    1.5;

  text-align:
    right;
}
/* =========================================================
   MAP LIBRARY TOOLBAR
   ========================================================= */

.map-library-toolbar {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    18px;
}


.map-search {
  width:
    min(430px, 100%);

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.map-search span {
  color:
    #858d67;

  font-size:
    .46rem;

  font-weight:
    900;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;
}


.map-search input {
  width:
    100%;

  min-height:
    42px;

  padding:
    0 14px;

  border:
    1px solid rgba(181, 175, 135, .18);

  outline:
    none;

  background:
    rgba(10, 13, 9, .92);

  color:
    #d8d3be;

  font: inherit;

  font-size:
    .72rem;

  transition:
    border-color .2s ease,
    background .2s ease;
}


.map-search input::placeholder {
  color:
    #62675d;
}


.map-search input:focus {
  border-color:
    rgba(164, 176, 108, .52);

  background:
    rgba(13, 17, 11, .98);
}


.map-library-count {
  padding-bottom:
    10px;

  color:
    #767b6f;

  font-size:
    .58rem;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


/* =========================================================
   MAP GRID
   ========================================================= */

.map-library-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    14px;
}


/* =========================================================
   MAP CARD
   ========================================================= */

.map-library-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    235px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid rgba(181, 175, 135, .16);

  background:
    linear-gradient(
      155deg,
      rgba(18, 22, 14, .98),
      rgba(8, 10, 7, .99)
    );

  box-shadow:
    0 16px 32px rgba(0, 0, 0, .18);

  text-decoration:
    none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.map-library-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(175, 184, 120, .42);

  box-shadow:
    0 22px 40px rgba(0, 0, 0, .28);
}


.map-library-card-image {
  position:
    relative;

  height:
    145px;

  overflow:
    hidden;

  background:
    #0a0d08;
}


.map-library-card-image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .25s ease,
    filter .25s ease;

  filter:
    brightness(.72)
    saturate(.78)
    contrast(1.05);
}


.map-library-card:hover
.map-library-card-image img {
  transform:
    scale(1.035);

  filter:
    brightness(.82)
    saturate(.86)
    contrast(1.06);
}


.map-library-card-image::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(5, 7, 5, .04),
      rgba(5, 7, 5, .12) 48%,
      rgba(5, 7, 5, .84) 100%
    );

  pointer-events:
    none;
}


.map-library-card-body {
  flex:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    15px 17px 16px;
}


.map-library-card-copy {
  min-width:
    0;
}


.map-library-card-copy span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    #858d68;

  font-size:
    .43rem;

  font-weight:
    900;

  letter-spacing:
    .16em;

  text-transform:
    uppercase;
}


.map-library-card-copy h3 {
  margin:
    0;

  overflow:
    hidden;

  color:
    #ddd7c1;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size:
    1.45rem;

  line-height:
    1;

  letter-spacing:
    .025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  text-transform:
    uppercase;
}


.map-library-card-arrow {
  flex:
    0 0 auto;

  color:
    #8e9868;

  font-size:
    1.25rem;

  transition:
    transform .2s ease,
    color .2s ease;
}


.map-library-card:hover
.map-library-card-arrow {
  transform:
    translateX(4px);

  color:
    #bdc78d;
}


/* =========================================================
   NO IMAGE FALLBACK
   ========================================================= */

.map-library-card-image.is-empty {
  display:
    grid;

  place-items:
    center;

  background:
    linear-gradient(
      135deg,
      #151910,
      #0a0c08
    );
}


.map-library-card-image.is-empty::before {
  content:
    "TACTICAL MAP";

  position:
    relative;

  z-index:
    2;

  color:
    #656c52;

  font-size:
    .52rem;

  font-weight:
    900;

  letter-spacing:
    .18em;
}


/* =========================================================
   LOADING / EMPTY STATE
   ========================================================= */

.map-library-loading,
.map-library-empty {
  min-height:
    220px;

  grid-column:
    1 / -1;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  text-align:
    center;

  border:
    1px solid rgba(181, 175, 135, .13);

  background:
    rgba(12, 15, 10, .76);
}


.map-library-loading span,
.map-library-empty span {
  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(181, 175, 135, .2);

  color:
    #98a06f;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size:
    .68rem;

  letter-spacing:
    .08em;
}


.map-library-loading strong,
.map-library-empty strong {
  color:
    #bdb9a6;

  font-size:
    .7rem;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


/* =========================================================
   FOOTER
   ========================================================= */

.map-room-footer {
  width:
    min(1220px, calc(100% - 54px));

  margin:
    0 auto;

  padding:
    18px 0 45px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

  .map-library-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .map-room-shell {
    padding-top:
      68px;
  }


  .map-room-hero-content,
  .map-library-section,
  .map-room-footer {
    width:
      calc(100% - 28px);
  }


  .map-library-heading,
  .map-library-toolbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .map-library-description {
    max-width:
      none;

    text-align:
      left;
  }


  .map-search {
    width:
      100%;
  }


  .map-library-count {
    padding-bottom:
      0;
  }


  .map-library-grid {
    grid-template-columns:
      1fr;
  }


  .map-library-card {
    min-height:
      220px;
  }


  .map-library-card-image {
    height:
      140px;
  }

}