/* ========= */
/* SOBRE.CSS */
/* ========= */

:root{
  /* Page background (single image for the whole page) */
  --page-bg-image: url("../img/sobre/sobre8.webp");

  --page-bg-size: 110%;
  --page-bg-opacity: 0.38;
  --page-bg-pos-x: -50px;
}

/* Match homepage top spacing feel */
.about-section{
  padding-top: 54px;
  padding-bottom: 72px;
}

/* Grid */
.about-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: stretch;
}

.about-grid-tight{
  margin-top: 14px;
}

/* Section 3: swap proportions (divider on the other half) */
.about-grid-reverse{
  grid-template-columns: .85fr 1.15fr;
}

/* Card */
.about-card{
  border-radius: 18px;
  padding: 18px;

  background:
    var(--glass-pane-1),
    var(--glass-pane-2),
    var(--glass-pane-tint),
    var(--glass-pane-texture),
    var(--glass-noise);
  border: 1px solid var(--glass-card-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    var(--glass-card-shadow);

  display: flex;
  flex-direction: column;
  height: 100%;
}

.about-card-title{
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: -.01em;
}

.about-card-subtitle{
  margin: 0 0 4px;
  color: rgba(15,23,42,.70);
  font-size: 15px;
}

/* Actions: use existing .btn styles */
.about-actions{
  margin-top: 27px;
  display: flex;
  flex-direction: column;   /* desktop: stacked like Home */
  flex-wrap: nowrap;
  gap: 10px;
  align-items: flex-start;  /* keep left aligned */
  justify-content: flex-start;
}

/* Features: 2x2 grid for 4 cards */
.about-features{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Optional: on wide screens it becomes 4 across */
@media (min-width: 1120px){
  .about-features{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-feature{
  border-radius: 18px;
  padding: 18px;

  background:
    var(--glass-pane-1),
    var(--glass-pane-2),
    var(--glass-pane-tint),
    var(--glass-pane-texture),
    var(--glass-noise);
  border: 1px solid var(--glass-card-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    var(--glass-card-shadow);
}

.about-feature-title{
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -.01em;
}

.about-logo-card .about-card-title{
  text-align: left;
  align-self: stretch;
}

.about-logo{
  margin-left: auto;
  margin-right: auto;
}

/* Logo card helpers */
.about-logo-card{
  align-items: center;
  justify-content: center;
}

.about-logo{
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(15,23,42,.12));
  align-items: center;
}

/* CTA */
.about-cta{
  margin-top: 18px;
}

.about-cta-inner{
  border-radius: var(--r);
  padding: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background:
    var(--glass-pane-1),
    var(--glass-pane-2),
    var(--glass-pane-tint),
    var(--glass-pane-texture),
    var(--glass-noise);
  border: 1px solid var(--glass-card-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    var(--glass-card-shadow);
}

.about-cta-title{
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: -.01em;
}

.about-cta-subtitle{
  margin: 0;
  color: rgba(15,23,42,.70);
  font-size: 14px;
}

/* Responsive */

/* -------------------------------------------------------
   BACKGROUND SAFETY RULES (aspect/orientation-based)
   Mirrors Offset pattern (image + "m" image)
   ------------------------------------------------------- */

/* Tall portrait (phones, portrait tablets, tall devtools) */
@media (orientation: portrait) and (max-aspect-ratio: 3/4){
  :root{
    --page-bg-image: url("../img/sobre/sobre8m.webp");
    --page-bg-size: 120%;
    --page-bg-pos-y: 50%;
  }
}

/* 4:3-ish landscape (1024×768, 1440×1080, etc.) */
@media (orientation: landscape) and (max-aspect-ratio: 4/3){
  :root{
    --page-bg-size: 170%;
    --page-bg-pos-y: 50%;
  }
}

/* -------------------------------------------------------
   BUTTON “MOBILE/TABLET” BEHAVIOUR UNDER 1440px
   Only on touch devices (prevents affecting desktop laptops)
   ------------------------------------------------------- */
@media (max-width: 1440px) and (hover: none) and (pointer: coarse){

  /* Mobile/tablet: buttons side-by-side, centered, stretched */
  .about-actions{
    margin-top: 18px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
  }
  .about-actions .btn{
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  /* CTA: stack copy + stretch button */
  .about-cta-inner{
    flex-direction: column;
    align-items: stretch;
  }
  .about-cta-inner .btn{
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: center;
    text-align: center;
  }
}

/* General responsive layout (same as you had) */
@media (max-width: 980px){

  :root{
    --page-bg-size: 120%;
  }

  /* Grid behaviour consistent with Home */
  .about-grid{ grid-template-columns: 1fr; }
  .about-grid-reverse{ grid-template-columns: 1fr; }
}

/* Small phones: swap to mobile background */
@media (max-width: 450px){
  :root{
    --page-bg-image: url("../img/sobre/sobre8m.webp");
    --page-bg-size: 120%;
    --page-bg-pos-y: 50%;
  }

  .about-grid{ grid-template-columns: 1fr; }
  .about-grid-reverse{ grid-template-columns: 1fr; }

  .about-features{ grid-template-columns: 1fr; }

  .about-cta-inner{
    flex-direction: column;
    align-items: stretch;
  }
}