/* =============================================
   main.css — Global Styles
   ============================================= */

/* --- Base --- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: #fff;
  background-color: var(--color-bg-alt);
  line-height: var(--leading-normal);
}

/* --- Typography --- */
h1, h2 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

h3, h4, h5, h6 {
  font-weight: var(--font-normal);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }
p { font-size: var(--text-base); }

a { color: #fff; }



/* --- Layout Utilities --- */
#main-content {
  margin: 0 auto;
}

.section {
  padding-block: var(--space-16);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* --- Flexbox / Grid Helpers --- */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4        { gap: var(--space-4); }
.gap-8        { gap: var(--space-8); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-8);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-8);
}

.grid-2-uneven-left,
.grid-2-uneven-right {
  display: grid;
  gap: 1rem;
}
.grid-2-uneven-left  { grid-template-columns: 3fr 2fr; }
.grid-2-uneven-right { grid-template-columns: 2fr 3fr; }

@media (max-width: 690px) {
  .grid-2-uneven-left,
  .grid-2-uneven-right {
    grid-template-columns: 1fr;
  }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--color-accent);
  border: solid 2px var(--color-accent);
  color: #fff;
}


.btn--primary:hover {
  background: var(--color-bg);
  color: white;
  border-color: var(--color-bg);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
}
.btn--ghost:hover {
  background: var(--color-surface);
}

/* --- Cards --- */
.card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: none;
  padding: var(--space-10);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
  container-type: inline-size;
}
.card:hover {
  box-shadow: var(--shadow-md);
}

/* --- Forms --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-bg);
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

textarea {
  resize: vertical;
  min-height: 120px;
}


/* --- Section Padding --- */
.hero, .featured-product, .platform-feature, .feature-grid, .how-to-video, .booking {
  padding-block: clamp(3rem, 2rem + 4vw, var(--space-24));
}

.inner-content {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-inline: var(--space-4);
}

/* --- Background Image --- */
.top-background, .feature-grid, .pre-footer-cta {
    background-image:linear-gradient(45deg,rgba(24, 0, 2, 1) 0%, rgba(2, 89, 250, 1) 32%, rgba(230, 136, 73, 1) 81%, rgba(215, 89, 6, 1) 100%);
    background-size: cover;
    background-repeat: no-repeat;
}
.top-background {
    background-position: 100% 80%;
}
.feature-grid {
    background-position: 50% 20%;
}
.pre-footer-cta {
    background-position: 85% 40%;
}

/* --- Hero --- */
.hero .inner-content {
  padding-bottom: var(--space-24);
}
.hero__title {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.subtitle {
  font-size: var(--text-2xl);
  max-width: 45ch;
  margin-bottom: var(--space-8);
}


.hero-logo {
  margin-left: clamp(-7%, -2vw, 0%);
  max-width: 55%;
}

.hero-image {
  max-width: 170%;
  margin-top: -5%;
  margin-left: -10%;
}

@media (max-width: 1023px) {
  .hero-image {
    max-width: 150%;
    margin-top: 7%;
    margin-left: -10%;
  }
}

@media (max-width: 826px) {
  .hero-image {
    margin-top: 25%;
  }
}

@media (max-width: 764px) {
  .hero-image {
    margin-top: 31%;
  }
}

@media (max-width: 690px) {
  .hero-image {
    margin-top: 5%;
    max-width: 100%;
    margin-left:0;
  }
}

hr {
  width: 40%;
  margin: 0 auto;
  border: none;
  height: 15px;
  background-color: var(--color-text);
  border-radius: 5px;
}
/* --- Featured Product --- */
.featured-product-left { align-content: center; }
.featured-product h2 {
  font-weight: var(--font-normal);
}
.featured-product h3 {
  font-size: var(--text-lg);
}
.link-cta {
  color: #fff;
}
.link-cta:hover {
  color: var(--color-accent);
}

.featured-image {
  max-width: 150%;
  margin-left: -25%;
}

@media (max-width: 900px) {
  .featured-image {
    max-width: 200%;
    margin-left: -50%;
  }
}

@media (max-width: 690px) {
  .featured-image {
    max-width: 100%;
    margin-left:0;
  }
}

/* --- Platform --- */

.platform-background, .platform-feature {
  background-color: var(--color-bg-alt);
}
.platform-feature .grid-2 {
  align-items: center;
}


/* --- Featured Locks --- */
.featured-locks {
  background-color: var(--color-bg-alt);
  padding-block: clamp(3rem, 2rem + 4vw, var(--space-24));
}

.featured-locks__heading {
  text-align: left;
  color: var(--color-text);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-10);
}

.featured-locks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.featured-locks__img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-locks__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: var(--space-1);
}

/* Tablet: keep 3 cols but tighten gap */
@media (max-width: 900px) {
  .featured-locks__grid {
    gap: var(--space-4);
  }
}

/* Mobile: stack to 1 col */
@media (max-width: 600px) {
  .featured-locks__grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
  }
}

/* --- Features --- */
.feature-grid-header h2 {
  color: #10122c;
  font-weight: 600;
  font-size: var(--text-4xl);
  padding-bottom: var(--space-3);
}

.feature-grid-header p {
  color: #10122c;
  padding-bottom: var(--space-5);
}
.feature-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

.feature-header .grid-icon {
  width: 30%;
}

.br-header {
  max-width: 11ch;
}

@media (max-width: 1024px){
    .grid-icon {
    max-width: 40%;
  }
}

@media (max-width: 900px){
    .feature-grid-container {
    grid-template-columns: 1fr;
  }
  .grid-icon {
    max-width: 25%;
  }
  .br-header {
    max-width: 35ch;
  }
}


.feature.card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.feature-details {
  flex: 1;
}

.feature-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.feature-header h3 {
  margin: 0;
  font-size: var(--text-4xl);
}

.feature-header .grid-icon {
  flex-shrink: 0;
  height: auto;
}

/* --- Video --- */
.how-to-video h2 {
  font-size: var(--text-5xl);
  text-align: center;
  padding-bottom: 2%;
  color: #fff;
}

.how-to-video .video {
  display: block;
  position: relative;
  width: 100vw;
  height: auto;
  border: 0;
}

how-to-video {
  background-color: #10122c;
}


/* --- Booking --- */
.booking {
  position: relative;
  background-color: #fff;
  color: #10122c;
}

.booking .grid-2 {
  align-items: center;
}


.booking-text {
  max-width: 60ch;
}

.booking h2 {
  font-weight: 600;
  font-size: var(--text-4xl);
  padding-bottom: var(--space-3);
}

.booking p {
  font-size: var(--text-lg);
}

.booking .btn {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--text-base) * 1.5);
  padding: calc(var(--space-1) * 1.5) calc(var(--space-2) * 1.5);
  z-index: 2;
}

@media (max-width: 400px) {
  .booking .btn {
    font-size: var(--text-base);
    padding: var(--space-1) var(--space-2);
  }
}

/* --- Contact Page --- */
.contact-page {
  background-color: var(--color-bg-alt);
}
.hero-contact-logo {
  max-width: 25%;
  margin: 0 auto;
}

.contact-form {
  max-width: 55%;
  margin: 0 auto;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  color: #fff;
}

.contact-form h1 {
  color: #fff;
  text-align: center;
}

@media (max-width: 1280px) {
  .contact-form {
  max-width: 65%;
}
}

@media (max-width: 1024px) {
  .contact-form {
  max-width: 75%;
}
}

@media (max-width: 768px) {
  .contact-form {
  max-width: 90%;
}
}


/* --- Prefooter --- */
.pre-footer-cta {
  margin: 0 auto;
  padding-block: clamp(1rem, 1rem + 4vw, var(--space-2));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pre-footer-cta .grid-2-uneven-left {
  display: grid;
  grid-template-columns: max-content max-content;
  width: fit-content;
  align-items: center;
  gap: var(--space-4);
}

.pre-footer-cta h2 {
  white-space: nowrap;
}

@media (max-width: 900px){
    .pre-footer-cta .grid-2-uneven-left {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 690px) {
  .pre-footer-cta h2 {
    white-space: normal;
    text-align: center;
  }

  .pre-footer-cta .grid-2-uneven-left {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

.pre-footer-cta .grid-col:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pre-footer-cta .subtitle {
  margin-bottom: 0;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-xl);
  max-width: none;
}


/* --- Footer --- */
.site-footer {
  padding-block: var(--space-8);
  text-align: center;
  color: #fff;
  font-size: var(--text-sm);
  background-color: var(--color-bg-alt);
}

.footer-img-link {
  margin: 0 !important;
}
.site-footer img {
  max-width: 45%;
  margin: 0 auto;
  padding-bottom: 3%;
}

.site-footer a {
  color: #fff;
  margin: 1%;
}

.footer-map-address .grid-col:first-child {
  display: flex;
  justify-content: flex-end;
}

.footer-map-address {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  text-align: left;
}

.footer-map-address h3 {
  font-size: var(--text-lg);
}

.footer-map-address p {
  margin-bottom: 0;
}

.footer-copyright {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 0;
}

@media (max-width: 1200px) {.site-footer img {max-width:50%;} } 
@media (max-width: 1024px) {.site-footer img {max-width:60%;} }
@media (max-width: 860px) {.site-footer img {max-width:74%;} }  
@media (max-width: 768px) {.site-footer img {max-width:85%;} }
@media (max-width: 702px) {.site-footer img {max-width:50%;} }  

@media (max-width: 500px) {
  .footer-map-address {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-map-address .grid-col:first-child {
    justify-content: center;
  }
}

/* --- Reverse stacking order on collapse --- */
@media (max-width: 690px) {
  .hero .grid-2 > div:first-child  { order: 2; }
  .hero .grid-2 > div:last-child   { order: 1; }

  .featured-product .grid-2-uneven-left > .featured-product-left { order: 2; }
  .featured-product .grid-2-uneven-left > div:last-child          { order: 1; }
}

/* --- Utilities --- */
.text-center  { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}