/* ============================================
   FONTS
   ============================================ */
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald.light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald.regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald.bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}

a {
  text-decoration: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

/* ============================================
   THEME SYSTEM
   — .invertable elements flip black→white on
     dark/photo backgrounds via CSS filter.
   — Text colors transition smoothly.
   ============================================ */

/* Default transition for color changes */
.invertable {
  transition: filter 0.9s ease;
}

/* Light theme: white background, black elements */
body.theme-light {
  color: #111;
}
body.theme-light .invertable {
  filter: none;
}
body.theme-light .section-label,
body.theme-light .catalog-link,
body.theme-light .about-text p,
body.theme-light .tagline,
body.theme-light .copyright {
  color: #111;
}
body.theme-light .catalog-link {
  border-bottom-color: #111;
}
body.theme-light .spotify-pill {
  background: transparent;
}

/* Photo theme: photo background, white elements */
body.theme-photo {
  color: #fff;
}
body.theme-photo .invertable {
  filter: invert(1);
}
body.theme-photo .section-label,
body.theme-photo .catalog-link,
body.theme-photo .about-text p,
body.theme-photo .tagline,
body.theme-photo .copyright {
  color: #fff;
}
body.theme-photo .catalog-link {
  border-bottom-color: #fff;
}

/* Smooth text color transition */
.section-label,
.catalog-link,
.about-text p,
.tagline,
.copyright {
  transition: color 0.9s ease, border-color 0.9s ease;
}

/* ============================================
   SLIDESHOW BACKGROUND
   ============================================ */
.slideshow {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide.active {
  opacity: 1;
}

.slide-white {
  background-color: #ffffff;
}

.slide-bg1 {
  background-image: url("images/bg1.png");
}

.slide-bg2 {
  background-image: url("images/bg2.png");
}

/* ============================================
   MAIN LAYOUT — full-viewport 3-column grid
   ============================================ */
.layout {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 22fr 38fr 35fr;
  align-items: stretch;
}

/* ============================================
   ALL COLUMNS — shared base
   ============================================ */
.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* ============================================
   LEFT COLUMN
   ============================================ */
.col-left {
  padding: 4vh 2vw;
  gap: 0;
  align-items: center;
}

.section-label {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.7vw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.6vh;
}

/* Each brand item stacks: logo → CATALOG link */
.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3vh;
}

.brand-logo {
  display: block;
}

.onlygrams-logo {
  width: 16vw;
  height: auto;
  margin-bottom: 1.2vh;
}

.royalblunts-logo {
  width: 16vw;
  height: auto;
  margin-bottom: 1.2vh;
  margin-top: 0.5vh;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.25));
}

.catalog-link {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.55vw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 2.5px solid;
  padding-bottom: 1px;
  display: inline-block;
  opacity: 1;
  transition: color 0.9s ease, border-color 0.9s ease, opacity 0.2s;
}
.catalog-link:hover {
  opacity: 0.6;
}

/* ============================================
   CENTER COLUMN
   ============================================ */
.col-center {
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3vh 2vw;
}

.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-logo {
  height: 67vh;
  width: auto;
  max-width: 100%;
}

/* contact.svg is a wide SVG with envelope + CONTACT text */
.contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.5vh;
  opacity: 1;
  transition: opacity 0.2s;
}
.contact-link:hover {
  opacity: 0.65;
}
.contact-svg {
  width: 20vw;
  height: auto;
}

.copyright {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 0.85vw;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  margin-top: 1vh;
}

/* ============================================
   RIGHT COLUMN
   ============================================ */
.col-right {
  padding: 16vh 3.5vw 4vh 2vw;
  justify-content: space-between;
  gap: 0;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 3.5vh;
  margin-bottom: 0;
}

.about-text p {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.55vw;
  line-height: 1.55;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.about-text p strong {
  font-weight: 700;
}

.tagline {
  font-weight: 700 !important;
  text-align: left !important;
}

/* Social links — instagram.svg and spotify.svg are self-contained SVGs */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 1.6vh;
}

.social-link {
  display: block;
  transition: opacity 0.2s;
}
.social-link:hover {
  opacity: 0.65;
}

/* instagram.svg & spotify.svg contain icon + wordmark text */
.social-svg {
  width: 14vw;
  height: auto;
}

/* ============================================
   DESKTOP: hide mobile layout
   ============================================ */
.layout-mobile {
  display: none;
}

/* Spotify gets a dark background pill on photo slides */
.spotify-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.9em 0.35em 0.55em;
  border-radius: 5px;
  transition: background 0.9s ease;
}
body.theme-photo .spotify-pill {
  background: #111;
}

/* ============================================
   MOBILE LAYOUT — max-width: 1024px
   ============================================ */
@media (max-width: 1024px) {

  /* Hide desktop, show mobile */
  .layout { display: none; }
  .layout-mobile { display: flex; }

  /* Mobile body — scrollable, slideshow stays as fixed background */
  body {
    overflow: auto;
  }

  /* Mobile root container — sits above the slideshow */
  .layout-mobile {
    position: relative;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 6vw 6vw 10vw;
    gap: 7vw;
  }

  /* Logo */
  .m-logo-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .m-logo {
    width: 72vw;
    max-width: 380px;
    height: auto;
  }

  /* About text */
  .m-about {
    display: flex;
    flex-direction: column;
    gap: 4vw;
    width: 100%;
  }
  .m-about p {
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 4.2vw;
    line-height: 1.55;
    color: #111;
    text-align: justify;
    text-justify: inter-word;
  }
  .m-about p strong { font-weight: 700; }
  .m-tagline {
    font-weight: 700 !important;
    text-align: left !important;
  }

  /* Brands */
  .m-brands {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vw;
  }
  .m-section-label {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 5vw;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111;
  }
  .m-brand-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 8vw;
    width: 100%;
  }
  .m-brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2.5vw;
  }
  .m-brand-logo {
    width: 36vw;
    max-width: 180px;
    height: auto;
  }
  .m-catalog-link {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 3.8vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111;
    border-bottom: 2px solid #111;
    padding-bottom: 1px;
  }

  /* Footer: contact + social + copyright */
  .m-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    width: 100%;
  }
  .m-contact-link {
    display: flex;
    justify-content: center;
  }
  .m-contact-svg {
    width: 48vw;
    max-width: 240px;
    height: auto;
  }
  .m-social-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5vw;
  }
  .m-social-svg {
    width: 44vw;
    max-width: 220px;
    height: auto;
  }
  .m-copyright {
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 3vw;
    letter-spacing: 0.04em;
    color: #111;
    text-align: center;
  }

  /* Smooth transitions for mobile text */
  .m-section-label,
  .m-about p,
  .m-tagline,
  .m-catalog-link,
  .m-copyright {
    transition: color 0.9s ease, border-color 0.9s ease;
  }
  .m-invertable {
    transition: filter 0.9s ease;
  }

  /* Light theme — black text */
  body.theme-light .m-section-label,
  body.theme-light .m-about p,
  body.theme-light .m-catalog-link,
  body.theme-light .m-copyright { color: #111; }
  body.theme-light .m-catalog-link { border-bottom-color: #111; }
  body.theme-light .m-invertable { filter: none; }

  /* Photo theme — white text */
  body.theme-photo .m-section-label,
  body.theme-photo .m-about p,
  body.theme-photo .m-catalog-link,
  body.theme-photo .m-copyright { color: #fff; }
  body.theme-photo .m-catalog-link { border-bottom-color: #fff; }
  body.theme-photo .m-invertable { filter: invert(1); }
}