/* ===================================================================
   PAGE-SPECIFIC STYLES
   Menu sections, about pages, team, info rows, quotes
   =================================================================== */

/* ===================================================================
   MENU SECTIONS (Homepage tiles)
   =================================================================== */

.menu-section {
     height: 50vh;
     width: 100%;
}

.menu-section.tiles {
     flex-direction: row;
     gap: var(--spacing-xl);
     width: 100%;
}

.menu-section.tiles .menu-tile {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 0 0;
     box-shadow: var(--shadow-1);
     cursor: pointer;
     flex: 1 1 0;
     height: 100%;
     min-height: 80vh;
     min-width: 0;
     overflow: hidden;
     position: relative;
     transition: box-shadow var(--motion-medium) var(--motion-ease);
}

.menu-section.tiles .menu-tile::before {
     background-image: inherit;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     content: "";
     inset: 0;
     position: absolute;
     transform: scale(1);
     transition: none;
     will-change: auto;
     z-index: 0;
}

.menu-section.tiles .menu-tile.menu-map .nav-content {
     z-index: 20;
}

.menu-section.tiles .menu-tile.menu-map .nav-toggle,
.menu-section.tiles .menu-tile.menu-map .nav-toggle:before {
     z-index: 5;
}

@media screen and (min-width: 1024px) {
     .menu-section {
          display: block;
          height: 100vh;
          padding-top: calc(var(--nav-height) * 2);
          padding-bottom: var(--nav-height);
     }

     .menu-section.tiles {
          display: flex;
          padding-inline: var(--spacing-xl);
     }
}

@media (max-width: 1023px) {
     .menu-section.tiles {
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          gap: var(--spacing-lg);
          min-height: 100vh;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scroll-snap-type: x mandatory;
          --tile-width: 80vw;
          --tile-height: 70vh;
          padding-inline: calc((100vw - var(--tile-width)) / 2);
          scroll-padding-inline: calc((100vw - var(--tile-width)) / 2);
     }

     .menu-section.tiles .menu-tile {
          flex: 0 0 var(--tile-width);
          height: var(--tile-height);
          max-height: var(--tile-height);
          min-height: var(--tile-height);
          scroll-snap-align: center;
          scroll-snap-stop: always;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
     }

     .menu-section.tiles {
          scrollbar-width: none;
     }
     
     .menu-section.tiles::-webkit-scrollbar {
          display: none;
     }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
     .menu-section.tiles .menu-tile {
          will-change: auto;
     }

     .menu-section.tiles .menu-tile:hover,
     .menu-section.tiles .menu-tile:focus-within {
          box-shadow: var(--shadow-2);
     }

     .menu-section.tiles .menu-tile:hover .nav-toggle:before,
     .menu-section.tiles .menu-tile:focus-within .nav-toggle:before {
          background-color: var(--color-bg-overlay-medium);
     }
}

/* Nav toggle within tiles */
.menu-section .nav-toggle {
     display: block;
     height: 100%;
     padding: 0;
     position: relative;
     transition: opacity var(--motion-fast), transform var(--motion-fast);
     width: 100%;
     z-index: 10;
}

.menu-section .nav-toggle:before {
     background-color: var(--color-bg-overlay-light);
     content: "";
     display: block;
     inset: 0;
     position: absolute;
     transition: background-color var(--motion-fast) var(--motion-ease);
     z-index: 10;
}

.menu-section .nav-toggle img {
     bottom: 0;
     height: 100%;
     left: 0;
     object-fit: cover;
     position: absolute;
     right: 0;
     top: 0;
     width: 100%;
}

/* Nav content overlay */
.nav-content {
     bottom: 0;
     left: 0;
     overflow: hidden;
     padding: var(--spacing-lg);
     position: absolute;
     right: 0;
     transition: opacity var(--motion-fast);
     white-space: normal;
     z-index: 10;
}

@media screen and (min-width: 1024px) {
     .nav-content {
          padding: var(--spacing-2xl);
     }
}

@media screen and (max-width: 1023px) {
     .nav-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 100%;
          text-align: center;
          gap: var(--spacing-sm);
          background-color: var(--color-header-bg);
          -webkit-backdrop-filter: var(--nav-blur);
          backdrop-filter: var(--nav-blur);
          padding: var(--spacing-md) var(--spacing-lg);
     }
}

.nav-content .nav-title {
     color: var(--color-white);
     display: block;
     font-size: var(--font-size-md);
     font-weight: var(--font-weight-bold);
     letter-spacing: var(--letter-spacing-normal);
     line-height: var(--line-height-tight);
     margin: 0;
     text-transform: uppercase;
}

@media (max-width: 1023px) {
     .nav-content .nav-title {
          font-size: var(--font-size-mobile-base);
          font-weight: var(--font-weight-normal);
          line-height: 1.2;
     }
}

@media screen and (min-width: 1024px) {
     .nav-content .nav-title {
          font-size: var(--font-size-lg);
     }
}

.nav-content .btn {
     display: none;
}

@media (max-width: 1023px) {
     .nav-content .btn {
          display: inline-block;
          margin-top: var(--spacing-lg);
     }
}

@media screen and (min-width: 1024px) {
     .nav-content .btn {
          display: inline-block;
          margin-top: var(--spacing-2xl);
          margin-bottom: calc(var(--spacing-5xl) * -1);
          opacity: 0;
          transition: all var(--motion-fast) ease-in-out;
     }
}

@media screen and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
     .menu-section ul.menu li:hover .nav-content .btn,
     .menu-section ul.menu li:focus-within .nav-content .btn,
     .menu-section .menu-tile:hover .nav-content .btn,
     .menu-section .menu-tile:focus-within .nav-content .btn {
          margin-bottom: 0;
          opacity: 1;
     }
}

/* ===================================================================
   ABOUT PAGE STYLES
   =================================================================== */

.about-hero {
     width: 100vw;
     height: var(--hero-height);
     min-height: var(--hero-min-height);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
}

.about-main-inner {
     width: var(--section-content-width);
     padding: var(--spacing-4xl);
}

@media (max-width: 1023px) {
     .about-main-inner {
          width: 100vw;
     }
}

@media (max-width: 1023px) {
     .about-page-heading {
          margin-block: var(--spacing-6xl);
          text-align: center;
     }
}

.about-secure-title {
     font-size: var(--font-size-2xl);
     color: var(--color-white);
     font-family: var(--font-heading);
     font-weight: var(--font-weight-semibold);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-wider);
     padding: var(--spacing-xl);
     margin: var(--spacing-xl);
}

.panel-icon {
     padding-block-end: var(--spacing-4xl);
}

@media (max-width: 1023px) {
     .about-secure-text {
          width: 90vw;
          max-width: none;
     }
}

/* ===================================================================
   TEAM CARDS
   =================================================================== */

.team-cards-container {
     display: flex;
     flex-direction: row;
     gap: var(--spacing-4xl);
     row-gap: var(--spacing-4xl);
     padding: var(--spacing-4xl);
     align-items: center;
     justify-content: center;
     width: 100vw;
     flex-wrap: wrap;
}

.team-card {
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     min-width: var(--team-card-min-width);
     background-color: var(--color-header-bg);
     padding: var(--spacing-xl);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-1);
     color: var(--color-white);
     cursor: pointer;
     flex: 0 1 calc(33vw - var(--spacing-4xl) - var(--spacing-4xl));
     transition: background-color var(--motion-slow) var(--motion-ease), 
                 box-shadow var(--motion-slow) var(--motion-ease);
     z-index: 0;
}

/* Material animated background on hover */
.team-card::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     width: 0;
     height: 0;
     background: radial-gradient(circle, var(--color-hover-glow-start) 0%, var(--color-hover-glow-end) 100%);
     transform: translate(-50%, -50%) scale(0.2);
     opacity: 0;
     transition: width var(--motion-slow) var(--motion-ease), 
                 height var(--motion-slow) var(--motion-ease), 
                 opacity var(--motion-medium) var(--motion-ease), 
                 transform var(--motion-slow) var(--motion-ease);
     border-radius: var(--radius-circle);
     z-index: 1;
     pointer-events: none;
}

.team-card:hover::before {
     width: 300%;
     height: 300%;
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
}

.team-card:hover {
     background-color: var(--color-bg-header-hover);
     box-shadow: var(--shadow-2);
}

.team-card > * {
     position: relative;
     z-index: 2;
}

.team-card-image {
     width: var(--team-card-image-size);
     height: var(--team-card-image-size);
     border-radius: var(--radius-circle);
     object-fit: cover;
     margin-bottom: var(--spacing-xl);
}

@media (max-width: 1023px) {
     .team-cards-container {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-4xl);
          padding: var(--spacing-4xl);
          align-items: center;
          justify-content: center;
          width: 100vw;
          flex-wrap: wrap;
     }

     .team-card {
          position: relative;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: calc(100vw - var(--spacing-4xl) - var(--spacing-4xl));
          height: fit-content;
          min-height: fit-content;
          background-color: var(--color-header-bg);
          padding: var(--spacing-4xl);
          border-radius: var(--radius-lg);
          box-shadow: var(--shadow-1);
          color: var(--color-white);
          cursor: pointer;
          flex: 0 1 calc(20vw - var(--spacing-4xl) - var(--spacing-4xl));
          transition: background-color var(--motion-slow) var(--motion-ease), 
                      box-shadow var(--motion-slow) var(--motion-ease);
          z-index: 0;
          scroll-snap-align: center;
     }

     .team-card-image {
          width: var(--team-card-image-size-mobile);
          height: var(--team-card-image-size-mobile);
          border-radius: var(--radius-circle);
          object-fit: cover;
          margin-bottom: var(--spacing-xl);
     }

     .team-card-name {
          font-size: var(--font-size-mobile-lg);
     }
}

/* ===================================================================
   PERSON PROFILE PAGES
   =================================================================== */

.meet-the-person-hero {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: var(--spacing-6xl);
     margin: var(--spacing-4xl);
}

@media (max-width: 1023px) {
     .meet-the-person-hero {
          margin-block-start: 12.5vh;
     }
}

.meet-the-person-image {
     width: 40vh;
     height: 40vh;
     border-radius: var(--radius-circle);
     object-fit: cover;
}

.meet-the-person-hero-title {
     color: var(--color-white);
     font-family: var(--font-heading);
     font-size: var(--font-size-2xl);
     font-weight: var(--font-weight-semibold);
     padding: var(--spacing-4xl);
     padding-block-end: var(--spacing-xl);
}

.meet-the-person-hero-subtitle {
     color: var(--color-white);
     font-family: var(--font-heading);
     font-size: var(--font-size-xl);
     font-weight: var(--font-weight-normal);
     margin: 0;
     padding: 0 var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
}

.person-info-row {
     display: flex;
     flex-direction: row;
     gap: var(--spacing-4xl);
     width: var(--section-content-width);
     align-items: center;
     justify-content: center;
     text-align: center;
}

.person-info-card {
     padding: var(--spacing-xl);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     height: 100%;
}

.person-info-card p {
     margin: 0;
}

@media (max-width: 1023px) {
     .person-info-row {
          flex-direction: column;
          width: 100vw;
          padding: var(--spacing-xl);
          gap: var(--spacing-xl);
     }
}