/**
 * Layout and Grid Styles
 * Contains responsive layout, grid system, and viewport-specific styles
 */

/* Base Layout */
#map {
  width: 100%;
  background: var(--map-background);
  height: 84vh;
}

#panel {
  width: 100%;
  height: 400px;
}

/* Grid System */
@media (min-width: 200px) {
  .col-sm-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Trip History */
#trip-history {
  height: 40vh;
  border: 0px lightslategrey solid;
}

#trip-history b {
  font-size: 0.88em;
}

/* Section Logo */
.section-logo {
  height: 30px;
  width: 30px;
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
  color: var(--white);
  text-transform: uppercase;
  font-size: 10px;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-md);
  background-position: center 5px;
  background-repeat: no-repeat;
}

/* Lists */
.list_names,
#list_names {
  border-left: 0px solid var(--primary-color);
  border-right: 0px solid var(--primary-color);
  border-bottom: 0px solid var(--primary-color);
  padding-top: 0px;
}

.title_list,
#title_list {
  padding-bottom: 0px;
}

.delimiter_line,
#delimiter_line {
  padding-bottom: 0px;
  text-align: center;
  border-bottom: 0px solid var(--secondary-color);
  margin-bottom: 0px;
}

.title_list.convenzioni-item {
  height: auto !important;
}

/* Portrait Orientation */
@media screen and (orientation: portrait) {
  .cruscottino-mappa {
    bottom: 5vh;
    background-color: var(--white);
    font-size: 5vw;
    opacity: 75%;
    position: absolute;
    left: 3vw;
  }

  #map {
    width: 100%;
    background: var(--map-background);
    height: 84vh;
  }

  #trip1 {
    font-size: 13vw;
    padding-left: 3px;
  }

  #trip-map-icons {
    border: 0px solid yellowgreen;
    font-size: 3vh;
    display: block;
    visibility: visible;
    z-index: var(--z-fixed);
  }
}

/* Landscape Orientation */
@media screen and (orientation: landscape) {
  #cruscottino {
    position: absolute;
    right: 5px;
    bottom: 0px;
    font-size: 1.3em;
  }

  .cruscottino-mappa {
    background-color: var(--white);
    font-size: 4vh;
    position: absolute;
  }

  #trip1 {
    font-size: 15vh;
    padding-left: 11px;
  }

  #trip-map-icons {
    border: 0px solid yellowgreen;
    font-size: 3vw;
    display: block;
    visibility: visible;
    z-index: var(--z-fixed);
  }

  #map {
    width: 100%;
    background: var(--map-background);
    height: 70vh;
  }
}

/* Large Screens */
@media (min-width: 700px) {
  .section-logo {
    display: none;
  }
}

/* Small Screens */
@media (max-width: 200px) {
  .section-logo {
    display: none;
  }
}

@media (max-width: 400px) {
  .title_list,
  #title_list {
    /* Additional small screen styles can be added here */
  }
}

/* Medium Screens and Up */
@media (min-width: 600px) {
  .title_list,
  #title_list {
    height: 0px;
  }
}

/* Extra Large Screens */
@media screen and (min-height: 1180px) {
  .cruscottino-mappa {
    bottom: -89vh;
    background-color: var(--white);
    font-size: 5vw;
    opacity: 75%;
    position: absolute;
    left: 3vw;
  }
}

/* Large Screens with Landscape */
@media (min-width: 992px) and (orientation: landscape) {
  .col-md-4 {
    /* Additional large screen landscape styles */
  }
}

/* Large Screens with Portrait */
@media (min-width: 992px) and (orientation: portrait) {
  .col-md-4 {
    /* Additional large screen portrait styles */
  }
}

/* Container and Grid Utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-md);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-md) * -0.5);
}

.col {
  flex: 1;
  padding: 0 calc(var(--spacing-md) * 0.5);
}

/* Flexbox Utilities */
.d-flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

/* Overflow Utilities */
.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

/* Viewport-specific height utilities */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }

.vh-25 { height: 25vh !important; }
.vh-50 { height: 50vh !important; }
.vh-75 { height: 75vh !important; }
.vh-100 { height: 100vh !important; }

/* Viewport-specific width utilities */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }

.vw-25 { width: 25vw !important; }
.vw-50 { width: 50vw !important; }
.vw-75 { width: 75vw !important; }
.vw-100 { width: 100vw !important; }