/* ============================================
   Apply / Applications Page
   ============================================ */

.apply {
  position: relative;
  min-height: 100vh;
  padding-top: var(--header-h);
  overflow: hidden;
}

.apply__bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
}

.apply__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apply__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 43, 0.5) 0%, rgba(1, 15, 22, 0.65) 100%);
}

.apply__container {
  position: relative;
  z-index: var(--z-content);
  max-width: 1300px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-16);
}

.apply__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 var(--space-12);
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.apply__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.apply__row {
  display: flex;
  justify-content: center;
}

.apply__row--left { justify-content: flex-start; padding-left: 4%; }
.apply__row--right { justify-content: flex-end; padding-right: 4%; }
.apply__row--center { justify-content: center; }

/* PNG anatomy (1600x573):
   - chevron card shape with cyan borders
   - cyan horizontal lines (upper + lower)
   - cyan vertical column dividers at 39% and 61%
   - coral/shrimp decorations at left and right tips */
.apply-card {
  position: relative;
  width: 640px;
  max-width: 100%;
  aspect-ratio: 2.79 / 1;
  background: url('../assets/images/apply-box.webp') no-repeat center/contain;
  text-align: center;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

.apply-card__title {
  position: absolute;
  top: 11%;
  left: 22%;
  right: 22%;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.55vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.15;
}

/* Pricing: 3 columns aligned to PNG dividers (39% / 22% / 39%) */
.apply-card__pricing {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  height: 38%;
  display: grid;
  grid-template-columns: 39% 22% 39%;
}

/* Cell: label + price stacked, both centred horizontally and vertically */
.apply-card__period {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0 var(--space-1);
}

.apply-card__period-name {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 0.85vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

/* PRICE — same typographic scale as the title */
.apply-card__period-price {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.55vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* APPLY NOW — large, prominent, but unframed.
   No border, no glow box, no fill — just a confident piece of typography
   sitting in the dark area below the lower cyan line, with a cyan chevron
   on the left to draw the eye. */
.apply-card__cta {
  position: absolute;
  bottom: 14%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(0, 0, 0, 0.5);
  transition: color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.apply-card__cta::before {
  content: '›';
  font-size: 1.5em;
  line-height: 0;
  color: var(--color-cyan-bright);
  display: inline-block;
}

.apply-card__cta:hover {
  color: var(--color-cyan-bright);
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .apply__title { font-size: 2rem; letter-spacing: 0.1em; }
  .apply__row--left, .apply__row--right { padding: 0; justify-content: center; }
  .apply-card { width: 100%; }
  .apply-card__title { font-size: 0.85rem; top: 11%; }
  .apply-card__period-name { font-size: 0.55rem; }
  .apply-card__period-price { font-size: 0.85rem; }
  .apply-card__cta { font-size: 0.95rem; bottom: 14%; }
}