/* ===========================================================================
   RowLink — Layout (grid system, sticky nav, sidebar patterns)
   Depends on: tokens.css, base.css
   Sprint 02 — Design System & Frontend Foundation
   =========================================================================== */

/* -----------------------------------------------------------------
   Container
   ----------------------------------------------------------------- */

.rl-container {
  width: 100%;
  max-width: var(--rl-content-profile);
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.rl-container--narrow { max-width: var(--rl-content-narrow); }
.rl-container--hero   { max-width: var(--rl-content-hero); }
.rl-container--search { max-width: var(--rl-content-search); }
.rl-container--landing { max-width: var(--rl-content-landing); }
.rl-container--profile-header { max-width: var(--rl-content-profile-header); }

/* -----------------------------------------------------------------
   Page shell
   ----------------------------------------------------------------- */

.rl-page {
  display: block;
  min-height: 60vh;
  padding-block: var(--rl-space-7);
  padding-inline: clamp(16px, 4vw, 40px);
  animation: rl-page-fade var(--rl-duration-page-fade) var(--rl-ease-standard);
}

@keyframes rl-page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rl-page--profile {
  padding-block: var(--rl-space-7) var(--rl-space-12);
}

.rl-page--signup {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .rl-page--signup {
    grid-template-columns: 5fr 7fr;
  }
}

.rl-page--landing {
  padding-block: var(--rl-space-9) var(--rl-space-12);
}

.rl-page--center {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
}

.rl-page--center .rl-container {
  text-align: left;
}

/* -----------------------------------------------------------------
   12-col grid
   ----------------------------------------------------------------- */

.rl-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--rl-space-7);
}

.rl-grid--main-aside {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (min-width: 992px) {
  .rl-grid--main-aside {
    grid-template-columns: 8fr 4fr;
  }
}

.rl-grid--signup {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .rl-grid--signup {
    grid-template-columns: 5fr 7fr;
  }
}

.rl-col-12 { grid-column: span 12; }
.rl-col-9  { grid-column: span 12; }
.rl-col-8  { grid-column: span 12; }
.rl-col-6  { grid-column: span 12; }
.rl-col-5  { grid-column: span 12; }
.rl-col-4  { grid-column: span 12; }
.rl-col-3  { grid-column: span 12; }

@media (min-width: 768px) {
  .rl-col-md-6 { grid-column: span 6; }
}

@media (min-width: 992px) {
  .rl-col-9 { grid-column: span 9; }
  .rl-col-8 { grid-column: span 8; }
  .rl-col-6 { grid-column: span 6; }
  .rl-col-5 { grid-column: span 5; }
  .rl-col-4 { grid-column: span 4; }
  .rl-col-3 { grid-column: span 3; }
}

/* -----------------------------------------------------------------
   Section wrappers
   ----------------------------------------------------------------- */

.rl-section {
  padding-block: clamp(36px, 5vw, 56px);
  padding-inline: clamp(16px, 4vw, 48px);
}

.rl-section--tight { padding-block: clamp(20px, 3vw, 28px); }

.rl-section__title {
  font-size: var(--rl-fs-h2-section);
  font-weight: var(--rl-fw-black);
  letter-spacing: var(--rl-tracking-h1);
  margin: 0 0 var(--rl-space-7);
}

.rl-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rl-space-3);
}

.rl-section__head .rl-section__title { margin-bottom: 0; }

.rl-section-link {
  font-size: var(--rl-fs-body-sm);
  font-weight: var(--rl-fw-bold);
  color: var(--rl-color-link);
  text-decoration: none;
}

.rl-section-link:hover { color: var(--rl-color-link-hover); }

/* -----------------------------------------------------------------
   Card grid (auto-fit minmax pattern from the prototype)
   ----------------------------------------------------------------- */

.rl-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--rl-space-6);
}

.rl-card-grid--tight { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rl-card-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rl-card-grid--mini { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--rl-space-3); }

/* -----------------------------------------------------------------
   Sticky nav (app + marketing)
   ----------------------------------------------------------------- */

.rl-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--rl-control-nav-h-app);
  background: var(--rl-color-surface);
  border-bottom: 1px solid var(--rl-color-border);
  display: flex;
  align-items: center;
  gap: var(--rl-space-7);
  padding-inline: clamp(12px, 3vw, 32px);
}

.rl-nav--marketing {
  height: var(--rl-control-nav-h-marketing);
  background: var(--rl-color-bg);
  border-bottom: none;
  padding-inline: clamp(16px, 4vw, 48px);
  justify-content: space-between;
}

.rl-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--rl-space-3);
  color: var(--rl-color-text-primary);
  text-decoration: none;
}

.rl-nav__brand:hover { color: var(--rl-color-text-primary); }

.rl-nav__search {
  flex: 1;
  max-width: 360px;
  height: var(--rl-control-search-h);
  padding-inline: var(--rl-space-3);
  border-radius: var(--rl-control-search-radius);
  background: var(--rl-paper-200);
  display: flex;
  align-items: center;
  color: var(--rl-color-text-muted);
  font-size: var(--rl-fs-body-sm);
  border: none;
  text-decoration: none;
}

.rl-nav__tabs {
  display: none;
  gap: var(--rl-space-7);
  margin-left: auto;
  font-size: var(--rl-fs-body-sm);
  font-weight: var(--rl-fw-semi);
}

@media (min-width: 992px) {
  .rl-nav__tabs { display: flex; }
}

.rl-nav__tab {
  padding: 19px 0;
  color: var(--rl-color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--rl-duration-default) var(--rl-ease-standard), border-color var(--rl-duration-default) var(--rl-ease-standard);
}

.rl-nav__tab:hover { color: var(--rl-color-text-primary); }

.rl-nav__tab.is-active {
  color: var(--rl-color-text-primary);
  border-bottom-color: var(--rl-color-link-hover);
}

.rl-nav__avatar { display: none; }

@media (min-width: 992px) {
  .rl-nav__avatar {
    display: block;
    width: var(--rl-control-avatar-sm);
    height: var(--rl-control-avatar-sm);
  }
}

.rl-nav__burger {
  margin-left: auto;
  width: var(--rl-control-hamburger-size);
  height: var(--rl-control-hamburger-size);
  border-radius: var(--rl-radius-4);
  border: 1.5px solid var(--rl-color-border-strong);
  background: var(--rl-color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  cursor: pointer;
}

.rl-nav__burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--rl-color-text-primary);
  border-radius: 1px;
}

@media (min-width: 992px) {
  .rl-nav__burger { display: none; }
}

/* Mobile dropdown */
.rl-nav-dropdown {
  position: sticky;
  top: var(--rl-control-nav-h-app);
  z-index: 49;
  background: var(--rl-color-surface);
  border-bottom: 1px solid var(--rl-color-border);
  box-shadow: var(--rl-shadow-nav-dropdown);
  padding: var(--rl-space-2) var(--rl-space-5) var(--rl-space-7);
  display: none;
  flex-direction: column;
}

@media (max-width: 991.98px) {
  .rl-nav-dropdown.is-open { display: flex; }
}

.rl-nav-dropdown__link {
  padding: var(--rl-space-3) var(--rl-space-3);
  font-size: 14.5px;
  font-weight: var(--rl-fw-bold);
  color: var(--rl-color-text-secondary);
  border-radius: var(--rl-radius-4);
  text-decoration: none;
}

.rl-nav-dropdown__link.is-active {
  background: var(--rl-color-accent-bg);
  color: var(--rl-color-text-primary);
}

.rl-nav-dropdown__user {
  display: flex;
  align-items: center;
  gap: var(--rl-space-3);
  padding: var(--rl-space-3) var(--rl-space-3) var(--rl-space-1);
  margin-top: var(--rl-space-2);
  border-top: 1px solid var(--rl-color-accent-bg);
}

.rl-nav-dropdown__user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--rl-radius-circle);
  object-fit: cover;
}

.rl-nav-dropdown__user-name {
  font-size: var(--rl-fs-body-sm);
  font-weight: var(--rl-fw-bold);
  color: var(--rl-color-text-primary);
}

/* -----------------------------------------------------------------
   Sticky search filters column (used on /recruiting)
   ----------------------------------------------------------------- */

.rl-search-filters {
  position: sticky;
  top: 82px;
  align-self: start;
  background: var(--rl-color-surface);
  border: 1px solid var(--rl-color-border);
  border-radius: var(--rl-radius-7);
  padding: var(--rl-card-padding-compact);
}

@media (max-width: 991.98px) {
  .rl-search-filters { position: static; }
}

/* -----------------------------------------------------------------
   Footer
   ----------------------------------------------------------------- */

.rl-footer {
  border-top: 1px solid var(--rl-color-border);
  padding-block: var(--rl-space-6);
  font-size: var(--rl-fs-secondary);
  color: var(--rl-color-text-muted);
}

.rl-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-space-3);
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(16px, 4vw, 48px);
}

.rl-footer__links {
  display: flex;
  gap: var(--rl-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rl-footer__links a {
  color: var(--rl-color-text-muted);
  text-decoration: none;
  font-weight: var(--rl-fw-semi);
}

.rl-footer__links a:hover {
  color: var(--rl-color-text-primary);
}

/* -----------------------------------------------------------------
   Profile page skeleton — header card + stat strip
   ----------------------------------------------------------------- */

.rl-profile-cover {
  position: relative;
  height: var(--rl-cover-h-rower-coach);
  overflow: hidden;
  background: var(--rl-color-surface-dark);
}

.rl-profile-cover--club { height: var(--rl-cover-h-club); }

.rl-profile-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rl-profile-cover__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(18, 60, 51, 0.45));
}

.rl-profile-header {
  background: var(--rl-color-surface);
  border-bottom: 1px solid var(--rl-color-border);
  padding: 0 clamp(16px, 4vw, 40px);
}

.rl-profile-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-space-5) var(--rl-space-7);
  align-items: flex-end;
  max-width: var(--rl-content-profile-header);
  margin: 0 auto;
  padding-block: var(--rl-space-7) 0;
  transform: translateY(-38px);
  margin-bottom: -14px;
}

.rl-profile-header__body {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--rl-space-2);
}

.rl-profile-header__name-row {
  display: flex;
  align-items: center;
  gap: var(--rl-space-3);
  flex-wrap: wrap;
}

.rl-profile-header__actions {
  display: flex;
  gap: var(--rl-space-3);
  padding-bottom: var(--rl-space-7);
}

/* Stat strip lives inside the profile-header card. */
.rl-stat-strip {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--rl-space-7);
  padding: var(--rl-space-7) 0 var(--rl-space-9);
  margin-top: var(--rl-space-2);
  max-width: var(--rl-content-profile-header);
  margin-inline: auto;
}

.rl-stat-strip__note {
  margin-left: auto;
  align-self: center;
  font-size: var(--rl-fs-form-label);
  color: var(--rl-color-text-muted);
}

/* -----------------------------------------------------------------
   Two-column main / sidebar with consistent 24/40 page padding
   ----------------------------------------------------------------- */

.rl-layout-main-aside {
  padding: var(--rl-space-7) clamp(16px, 4vw, 40px) var(--rl-space-12);
  max-width: var(--rl-content-profile);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rl-space-7);
}

@media (min-width: 992px) {
  .rl-layout-main-aside {
    grid-template-columns: 2fr 1fr;
  }
}

.rl-layout-main-aside > .rl-stack { min-width: 0; }
.rl-layout-main-aside > .rl-stack--sidebar { display: flex; flex-direction: column; gap: var(--rl-space-7); }

.rl-stack { display: flex; flex-direction: column; gap: var(--rl-space-7); }

/* -----------------------------------------------------------------
   App breakpoint helpers (Bootstrap-style, native CSS only)
   ----------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .rl-nav__search { display: none; }
}

@media (min-width: 768px) {
  .rl-nav__search { display: flex; }
}