/* ==========================================================================
   SETTINGS
   ========================================================================== */
/* Global variables, config */
:root {
  --color-primary: #1343F0;
  --color-secondary: #f5f7ff;
  --color-text: #333;
  --color-text-light: #666;
  --color-background: #f9faff;
  --color-card: #ffffff;
  --color-black: #171717;
  --shadow-default: 0 0.625rem 1.875rem rgba(19, 67, 240, 0.1);
  --transition-default: all 0.3s ease;
}

/* ==========================================================================
   GENERIC
   ========================================================================== */
/* Reset, normalize */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   ELEMENTS
   ========================================================================== */
/* Base HTML elements */
body {
  font-family: 'Instrument Sans', sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   OBJECTS
   ========================================================================== */
/* Layout patterns, no cosmetics */

.l-container {
  display: grid;
  grid-template-columns: 1fr; /* Mobile-first: single column by default */
  width: 100%;
  min-height: 100vh;
  padding: 1.25rem;
  gap: 1.25rem;
  position: relative;
}

/* ==========================================================================
   ATOMS
   ========================================================================== */
/* Basic building blocks */

/* Typography atoms */

.a-title {
  /* clamp(min, preferred, max) - scales from 24px at 375px viewport to 48px at 1440px viewport */
  font-size: clamp(1.5rem, 0.5rem + 2.67vw, 3rem); /* 24px to 48px */
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.06rem; /* -0.96px */
  color: var(--color-black);
}

.a-message {
  /* clamp(min, preferred, max) - scales from 14px at 375px viewport to 16px at 1440px viewport */
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem); /* 14px to 16px */
  font-weight: 400;
  line-height: 1.5; /* 24px */
  color: var(--color-text-light);
}

.a-text {
  /* clamp(min, preferred, max) - scales from 14px at 375px viewport to 16px at 1440px viewport */
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem); /* 14px to 16px */
  font-weight: 400;
  line-height: 1.5; /* 24px */
  color: var(--color-text);
}

.a-button {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 0 0 0 0.9479em; /* 0px 0px 0px 15.167px */
  padding: 0.8125em 1em; /* 13px 16px */
  height: 3em; /* 48px */
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.5; /* 24px */
  cursor: pointer;
  transition: var(--transition-default);
  display: flex;
  align-items: center;
  gap: 2em; /* 32px */
  text-decoration: none;
}

.a-button:hover {
  background-color: rgba(19, 67, 240, 0.9);
  text-decoration: none;
}

.a-button:focus { text-decoration: none; }

/* Image atom */
.a-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   MOLECULES
   ========================================================================== */

/* Image container molecule */
.m-image-container {
  position: relative;
  width: 100%;
  display: flex;
  aspect-ratio: 335/237;
}

/* ==========================================================================
   ORGANISMS
   ========================================================================== */
/* Complex UI components composed of molecules and atoms */

/* Splash content organism */
.o-splash-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
  padding-top: 1.125rem;
  padding-bottom: 2.5rem;
  order: 2; /* Display after splash-graphic on mobile */
}

/* Splash graphic organism */
.o-splash-graphic {
  border-radius: 0.5rem;
  background: radial-gradient(80.54% 100% at 100% 0%, rgba(19, 67, 240, 0.30) 0%, rgba(19, 67, 240, 0.00) 100%), #171717;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
  order: 1; /* Display before splash-content on mobile */
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Mobile only (768px and down) */

@media (max-width: 47.9375rem) {
  .a-button { margin-top: 1rem; }
}

/* Medium screens (768px and up) */
@media (min-width: 48rem) {
  .l-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .a-logo {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem; /* Larger positioning for desktop */
  }

  .m-image-container { aspect-ratio: 40/21; }

  .o-splash-content {
    padding: 1.25rem; /* Larger padding for desktop */
    order: 1; /* Reset order for desktop - display first */
  }

  .o-splash-graphic { order: 2; /* Reset order for desktop - display second */}
}

/* Large screens (1440px and up) */
@media (min-width: 90rem) {
  .a-title { font-size: 3.33vw; }

  .a-logo {
    top: 4.1666vw;
    left: 5.5556vw;
    width: 11.9444vw;
    height: 2.2222vw
  }

  .o-splash-content {
    padding: 4.1666vw; /* Larger padding for desktop */
    gap: 1.6667vw;
  }

  .l-container {
    padding: 1.3888vw;
    gap: 1.3888vw;
  }

  .a-text,
  .a-message,
  .a-button {
    font-size: 1.11vw;
  }

  .o-splash-graphic { border-radius: 0.5556vw; }
}