/* Section 1 */
.c-location-banner {
    padding-block:var(--space-l-xl) var(--space-m-l);
    --color-overlay:rgb(from var(--pine) r g b / .75);
    background-image: linear-gradient( var(--color-overlay), var(--color-overlay) ), url("../assets/location-top-banner.png");
    background-position: center center;
    background-size:cover;
}
.c-location-banner__heading {
    font-size:var(--step-5);
}
.c-location-banner__heading span {
    display: block;
    margin-left:1em;
}

/* Section 2 */
.c-location-info {
    background:var(--white);
    padding-block-start:var(--space-xl);
}

#location_info_container {
    display: grid;
    height: 100%;
    width:100%;
    align-items: center;
}
.c-location-info__column--1 {
    flex-basis: calc( 60% - var(--space-l) );
}
.c-location-info__column--2 {
    min-width: min(280px, 100%);
    flex-basis: calc( 40% - var(--space-l) );
}

.c-location-info__column {
    border-radius: var(--border-radius);
    background:var(--corporategreen);
    filter:drop-shadow(var(--drop-shadow))
}

.c-location-info__container {
    padding: var(--space-m) var(--space-xs);
}
.c-location-info__flex {
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    gap:var(--space-s);
    margin-block-end:var(--space-m);
}

.c-location-info__address {
    display: block;
    line-height: 1.4;
}
.c-location-info__list-border {
    display: flex;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    padding: .5rem;
    cursor: pointer;
    transition: .5s ease-in-out;
    aspect-ratio: 1;

    border: .2rem solid var(--white);
    color:var(--white);
}
.c-location-info__list-border svg {
    width: 100%;
    height: 100%;
    transition: .5s ease-in-out;
    color:currentColor;
}
.c-location-info__link {
    text-decoration: none;
    color:currentColor;
}
.c-location-info__underline {
    color:var(--white);
    background-size: 0 5px;
    background-image: linear-gradient(180deg,currentColor 25%,transparent 0);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
    display: inline;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
    line-height: 1;
    transition: background-size .3s;
}
@media (hover: hover) {
    .c-location-info__list-item:hover .c-location-info__list-border {
        transform: scale(1.1);
        transform-origin: center center;
    }
    .c-location-info__list-item:hover .c-location-info__underline {
        background-image: linear-gradient(180deg,currentColor 25%,transparent 0);
        background-size: 100% 5px;
        background-position-x: left;
        background-position-y: bottom;
    }
}

.c-location-info__inner--1 {
    flex-basis: calc( 60% - var(--space-l) );
    min-width: min(250px, 100%);
}
.c-location-info__inner--2 {
    flex-basis: calc( 40% - var(--space-l) );
    min-width: min(150px, 100%);
}

/* Time Styling */
.c-location-info__day {
    display: block;
    font-size:var(--step-1);
    font-weight: 600;
    color:var(--white)
}
.c-location-info__time {
    display: block;
    color:var(--white);
    font-weight: 200;
}

.c-location-info__columns {
    align-items: stretch;
}

/* Section 3 Head */
.c-location-title {
    padding-block:var(--space-l-xl) var(--space-s);
    background-color: var(--white);
}

/* Section 4 */
.c-location-officers {
    background-color:var(--powder);
    padding-block:var(--space-l-2xl) var(--space-m);
    text-align: center;
}
.c-location-officers__grid {
    margin-block-start:var(--space-m);
    width:100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap:var(--space-m-l);
    column-gap: var(--space-l);
}

.c-location-officers__officer {
    flex-grow:1;
    flex-shrink: 0;

    max-width: calc(25% - var(--space-l));
    flex-basis: calc(25% - var(--space-l));
    min-width: 175px;
}
.c-location-officers__pic {
    width:100%;
    height:auto;
    aspect-ratio: 1;
    border-radius: 50%;
    border:2px solid var(--corporategreen);
    transition:all .75s ease-in-out;
}

.c-location-officers__name {
    color:var(--black);
    margin-block:var(--space-xs) 0;
}
.c-location-officers__name span {
    display: inline-block;
}
.c-location-officers__title {
    color:var(--black);
    font-weight: 200;
    font-size:var(--step--1);
    margin-block-start:0;
}

.c-location-officers__name {
  --stroke-size:.5em;
  background-size: 0 var(--stroke-size);
  background-image: linear-gradient(180deg,currentColor 25%,transparent 0);
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: right;
  display: inline-block;
  padding-top: 5px;
  padding-bottom: var(--stroke-size);
  margin-bottom:calc( var(--stroke-size) * -1);
  position: relative;
  transition: background-size .3s;
}


@media (hover: hover) {
    .c-location-officers__officer:hover .c-location-officers__pic {
        transform:scale(1.05);
    }
    .c-location-officers__officer:hover .c-location-officers__name {
        xtext-decoration: underline;
        background-image: linear-gradient(180deg,currentColor 25%,transparent 0);
        background-size: 100% var(--stroke-size);
        background-position-x: left;
        background-position-y: bottom;
    }
}


/* Google Map */
#map {
  height: 100%;
  min-height:min(250px, 30vh);
}