/* ==========================================================================
   SOBREFMN.CSS
   FMN® — Federação Moçambicana de Natação

   COMPONENTES:
   - Providências / Serviços
   - Brochuras
   - Contacto
   - Horário de funcionamento
   - Conteúdo institucional

   NOTA:
   - O container das páginas utiliza 1200px.
   - Cores, tipografia, espaçamentos, bordas e sombras utilizam
     as variáveis globais de variables.css sempre que possível.
   ========================================================================== */


/* ==========================================================================
   1. PROVIDÊNCIAS / SERVIÇOS
   ========================================================================== */

.pr-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-10) var(--gutter);
}


/* --------------------------------------------------------------------------
   1.1 TÍTULO PRINCIPAL
   -------------------------------------------------------------------------- */

.pr-main-title {
  position: relative;

  margin: 0 0 var(--space-6);

  padding-bottom: var(--space-3);

  color: var(--color-heading);

  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.pr-main-title::after {
  content: '';

  position: absolute;
  left: 0;
  bottom: 0;

  width: 50px;
  height: 2px;

  background-color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   1.2 GRELHA
   -------------------------------------------------------------------------- */

.pr-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 120px;
  row-gap: var(--space-16);

  width: 100%;
}


/* --------------------------------------------------------------------------
   1.3 ITEM
   -------------------------------------------------------------------------- */

.pr-item {
  display: flex;
  align-items: center;

  gap: var(--space-6);

  width: 100%;

  background-color: var(--color-surface);
}


/* --------------------------------------------------------------------------
   1.4 ÍCONE
   -------------------------------------------------------------------------- */

.pr-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 76px;
  height: 76px;

  flex: 0 0 76px;

  background-color: var(--color-primary);

  color: var(--color-text-inverse);

  border-radius: var(--radius-md);
}


/* SVG DO ÍCONE */

.pr-icon-circle svg {
  width: 32px;
  height: 32px;

  display: block;
}


/* --------------------------------------------------------------------------
   1.5 TEXTO
   -------------------------------------------------------------------------- */

.pr-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
}


/* Etiqueta */

.pr-tag {
  margin-bottom: var(--space-1);

  color: var(--color-text-muted);

  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);

  line-height: var(--lh-body);

  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* Título */

.pr-title {
  margin: 0;

  color: var(--color-heading);

  font-size: var(--fs-small);
  font-weight: var(--fw-bold);

  line-height: var(--lh-heading);

  letter-spacing: 0.02em;
}


/* ==========================================================================
   2. TABELA / BROCHURAS / CONTACTO
   ========================================================================== */

.tb-container {
  display: grid;

  grid-template-columns: 260px minmax(0, 1fr);

  gap: var(--space-10);

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding: var(--space-3) var(--gutter);

  color: var(--color-text);
}


/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */

.tb-sidebar {
  display: flex;
  flex-direction: column;

  gap: var(--space-10);
}

.tb-section {
  display: flex;
  flex-direction: column;
}


/* --------------------------------------------------------------------------
   3.1 TÍTULO DA SIDEBAR
   -------------------------------------------------------------------------- */

.tb-sidebar-title {
  margin: 0 0 var(--space-5);

  color: var(--color-heading);

  font-size: var(--fs-small);
  font-weight: var(--fw-bold);

  line-height: var(--lh-heading);

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ==========================================================================
   4. BROCHURES
   ========================================================================== */

.tb-brochure-card {
  display: flex;
  align-items: center;

  gap: var(--space-4);

  padding: var(--space-5);

  margin-bottom: var(--space-3);

  background-color: var(--color-surface);

  border: 2px solid var(--color-accent);

  text-decoration: none;

  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.tb-brochure-card:hover {
  background-color: #fffdf6;
}


/* --------------------------------------------------------------------------
   4.1 ÍCONE
   -------------------------------------------------------------------------- */

.tb-card-icon {
  display: flex;
  align-items: center;

  flex-shrink: 0;

  color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   4.2 INFORMAÇÃO
   -------------------------------------------------------------------------- */

.tb-card-info {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


/* Título */

.tb-card-title {
  color: var(--color-text);

  font-size: var(--fs-small);
  font-weight: var(--fw-bold);

  line-height: var(--lh-heading);
}


/* Metadados */

.tb-card-meta {
  margin-top: var(--space-1);

  color: var(--color-text-muted);

  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}


/* ==========================================================================
   5. CTA
   ========================================================================== */

.tb-cta-box {
  display: flex;
  flex-direction: column;

  padding: var(--space-8) var(--space-6);

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);
}


/* Título */

.tb-cta-title {
  margin: 0 0 var(--space-4);

  color: var(--color-heading);

  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);

  line-height: var(--lh-heading);
}


/* Texto */

.tb-cta-text {
  margin: 0 0 var(--space-6);

  color: var(--color-text);

  font-size: var(--fs-small);

  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   6. BOTÃO CONTACTO
   ========================================================================== */

.tb-btn-contact {
  align-self: flex-start;

  padding: var(--space-3) var(--space-6);

  background-color: var(--button-primary-background);

  color: var(--button-primary-text);

  border: 1px solid var(--button-primary-border);

  text-decoration: none;

  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);

  line-height: 1;

  letter-spacing: 0.08em;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.tb-btn-contact:hover {
  background-color: var(--button-primary-hover-background);
}


/* ==========================================================================
   7. HORÁRIO DE FUNCIONAMENTO
   ========================================================================== */

.tb-time-intro {
  margin: 0 0 var(--space-4);

  color: var(--color-text);

  font-size: var(--fs-small);

  line-height: var(--lh-relaxed);
}


.tb-time-list {
  display: flex;
  flex-direction: column;

  gap: var(--space-2);

  margin: 0;
  padding: 0;

  list-style: none;
}


.tb-time-list li {
  display: flex;
  align-items: center;

  color: var(--color-text);

  font-size: var(--fs-small);

  line-height: var(--lh-body);
}


.tb-icon-clock {
  margin-right: var(--space-2);

  font-size: var(--fs-xs);

  filter: grayscale(100%);
}


/* ==========================================================================
   8. CONTEÚDO PRINCIPAL
   ========================================================================== */

.tb-main-content {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


/* ==========================================================================
   9. HERO
   ========================================================================== */

.tb-hero-card {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  align-items: stretch;

  background-color: var(--color-surface-muted);

  border: 1px solid var(--color-border);
}


/* --------------------------------------------------------------------------
   9.1 TEXTO DO HERO
   -------------------------------------------------------------------------- */

.tb-hero-text {
  display: flex;
  flex-direction: column;

  justify-content: center;

  padding: var(--space-12);
}


/* Subtítulo */

.tb-subtitle {
  margin-bottom: var(--space-2);

  color: var(--color-text-muted);

  font-size: var(--fs-small);

  line-height: var(--lh-body);
}


/* Título */

.tb-main-title {
  margin: 0 0 var(--space-5);

  color: var(--color-heading);

  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);

  line-height: var(--lh-heading);
}


/* Descrição */

.tb-description {
  margin: 0 0 var(--space-8);

  color: var(--color-text-muted);

  font-size: var(--fs-small);

  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   10. BOTÃO DO HERO
   ========================================================================== */

.tb-btn-quote {
  align-self: flex-start;

  padding: var(--space-4) var(--space-8);

  background-color: var(--color-accent);

  color: var(--color-text-inverse);

  border: 1px solid var(--color-accent);

  text-decoration: none;

  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);

  line-height: 1;

  letter-spacing: 0.08em;

  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.tb-btn-quote:hover {
  background-color: var(--color-primary-dark);

  border-color: var(--color-primary-dark);
}


/* ==========================================================================
   11. IMAGEM DO HERO
   ========================================================================== */

.tb-hero-image {
  width: 100%;
  height: 100%;

  min-height: 360px;
}


.tb-hero-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ==========================================================================
   12. RESPONSIVIDADE — TABLETS
   ========================================================================== */

@media (max-width: 992px) {

  /* ------------------------------------------------------------------------
     PROVIDÊNCIAS
     ------------------------------------------------------------------------ */

  .pr-grid {
    column-gap: var(--space-8);
    row-gap: var(--space-10);
  }


  /* ------------------------------------------------------------------------
     TABELA / CONTEÚDO
     ------------------------------------------------------------------------ */

  .tb-container {
    grid-template-columns: 1fr;

    gap: var(--space-10);
  }


  .tb-hero-card {
    grid-template-columns: 1fr;
  }


  .tb-hero-image {
    min-height: 300px;

    order: -1;
  }


  .tb-hero-text {
    padding: var(--space-8);
  }
}


/* ==========================================================================
   13. RESPONSIVIDADE — MOBILE
   ========================================================================== */

@media (max-width: 600px) {

  /* ------------------------------------------------------------------------
     PROVIDÊNCIAS
     ------------------------------------------------------------------------ */

  .pr-container {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }


  .pr-grid {
    grid-template-columns: 1fr;

    row-gap: var(--space-8);
  }


  .pr-item {
    gap: var(--space-4);
  }


  .pr-icon-circle {
    width: 66px;
    height: 66px;

    flex-basis: 66px;
  }


  .pr-icon-circle svg {
    width: 28px;
    height: 28px;
  }


  /* ------------------------------------------------------------------------
     HERO
     ------------------------------------------------------------------------ */

  .tb-hero-image {
    min-height: 240px;
  }


  .tb-hero-text {
    padding: var(--space-6);
  }


  .tb-main-title {
    font-size: var(--fs-h2);
  }


  .tb-description {
    margin-bottom: var(--space-6);
  }
}


/* ==========================================================================
   FIM — SOBREFMN.CSS
   ========================================================================== */