@font-face {
  font-family: 'FuturaLight';
  src: url('Fonts/FuturaLight/FuturaLight.otf');
  src: url('Fonts/FuturaLight/FuturaLight.eot?#iefix') format('embedded-opentype'),
       url('Fonts/FuturaLight/FuturaLight.woff') format('woff'),
       url('Fonts/FuturaLight/FuturaLight.ttf') format('truetype'),
}

@font-face {
  font-family: 'FuturaLightOblique';
  src: url('Fonts/FuturaLightOblique/FuturaLightOblique.otf');
  src: url('Fonts/FuturaLightOblique/FuturaLightOblique.eot?#iefix') format('embedded-opentype'),
       url('Fonts/FuturaLightOblique/FuturaLightOblique.woff') format('woff'),
       url('Fonts/FuturaLightOblique/FuturaLightOblique.ttf') format('truetype'),
}

@font-face {
  font-family: 'FuturaHeavy';
  src: url('Fonts/FuturaHeavy/FuturaHeavy.otf');
  src: url('Fonts/FuturaHeavy/FuturaHeavy.eot?#iefix') format('embedded-opentype'),
       url('Fonts/FuturaHeavy/FuturaHeavy.woff') format('woff'),
       url('Fonts/FuturaHeavy/FuturaHeavy.ttf') format('truetype'),
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: white;
  color: black;
  font-family: 'FuturaLight', sans-serif;
  font-size: 16pt;
  letter-spacing: -0.012rem;
  margin: 64px 36px 36px 36px;
}

/* Main grid container */
.main-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, auto);
  column-gap: 50px;
  row-gap: 92px;
  height: 100vh;
}

/* Row 1: Header */
.theater-name {
  grid-column: 2 / 6;
  grid-row: 1;
  text-align: center;
}

.screening-time {
  grid-column: 7 / 10;
  grid-row: 1;
  text-align: center;
}

/* Row 2: Main screening information */

.screening-one {
  grid-column: 1 / 4;
  grid-row: 2;
}

.screening-two {
  grid-column: 4 / 7;
  grid-row: 2;
}

.screening-three {
  grid-column: 7 / 10;
  grid-row: 2;
}

.screening-four {
  grid-column: 10 / 13;
  grid-row: 2;
}

.screening-date {
  text-align: center;
  cursor: pointer;
}

.screening-date:hover {
  text-decoration: underline;
  text-decoration-color: #ed1c24;
  text-underline-offset: 8px;
  text-decoration-thickness: 1.25px;
}

.film-list {
  text-align: left;
}

.quote-text {
  text-align: left;
  padding-left: 20px;
}

.quote-author {
  text-align: left;
}

/* Row 3: Footer */
.email {
  grid-column: 2 / 6;
  grid-row: 3;
  text-align: center;
  padding-bottom: 50px;
}

.email-link {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.email-link:hover {
  text-decoration: underline;
  text-decoration-color: #ed1c24;
  text-underline-offset: 8px;
  text-decoration-thickness: 1.25px;
}

.names {
  grid-column: 7 / 12;
  grid-row: 3;
  text-align: center;
  padding-bottom: 50px;
}

.name-link {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.name-link:hover {
  text-decoration: underline;
  text-decoration-color: #ed1c24;
  text-underline-offset: 8px;
  text-decoration-thickness: 1.25px;
}

/* Names formatting control */
.names-mobile {
  display: none;
}

.names-desktop {
  display: inline;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  cursor: pointer;
}

.modal-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 85vh;
  max-width: 90vw;
  object-fit: contain;
  cursor: default;
}

/* Mobile-only elements - hidden by default */
.mobile-more-info,
.mobile-poster {
  display: none;
  cursor: pointer;
  text-align: left;
  margin-top: 10px;
}

.mobile-more-info:hover,
.mobile-poster:hover {
  text-decoration: underline;
  text-decoration-color: #c20000;
  text-underline-offset: 8px;
  text-decoration-thickness: 1.25px;
}

/* Quote modal styles */
.quote-modal-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 36px;
  overflow-y: auto;
  cursor: default;
  box-sizing: border-box;
}

.quote-modal-text {
  font-family: 'FuturaLight', sans-serif;
  font-size: 16pt;
  letter-spacing: -0.012rem;
  text-align: left;
  padding-left: 20px;
  line-height: 1.4;
}

.quote-modal-author {
  font-family: 'FuturaLight', sans-serif;
  font-size: 16pt;
  letter-spacing: -0.012rem;
  text-align: left;
  line-height: 1.4;
}

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

/* Name formatting for smaller screens */
@media screen and (max-width: 1000px) {
  .names-desktop {
    display: none;
  }
  
  .names-mobile {
    display: inline;
  }
}

/* Mobile devices */
@media screen and (max-width: 700px) {
  .main-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, auto);
    column-gap: 5px;
    row-gap: 60px;
    height: 100vh;
  }

  .theater-name {
    grid-column: 1 / 7;
    grid-row: 1;
    text-align: center;
  }
  
  .screening-time {
    grid-column: 1 / 7;
    grid-row: 2;
    text-align: center;
  }

  .screening-one {
    grid-column: 1 / 7;
    grid-row: 3;
  }

  .screening-two {
    grid-column: 1 / 7;
    grid-row: 4;
  }

  .screening-three {
    grid-column: 1 / 7;
    grid-row: 5;
  }

  .screening-four {
    grid-column: 1 / 7;
    grid-row: 6;
  }

  .email {
    grid-column: 1 / 7;
    grid-row: 7;
    text-align: center;
    padding-bottom: 50px;
  }

  .names {
    grid-column: 1 / 7;
    grid-row: 8;
    text-align: center;
    padding-bottom: 50px;
  }

  /* Hide quote text and authors on mobile */
  .quote-text,
  .quote-author {
    display: none;
  }

  /* Show mobile-only elements */
  .mobile-more-info,
  .mobile-poster {
    display: block;
  }

  /* Disable hover effects on screening dates for mobile */
  .screening-date {
    cursor: default;
  }

  .screening-date:hover {
    text-decoration: none;
    color: black;
  }

}