/* Mobile-only spacing fixes.
 *
 * The original WordPress template uses big paddings (90–100px) and big
 * margin-bottom on the section dividers ("basketball icon between two
 * horizontal lines"). On desktop that looks balanced, but on a phone it
 * leaves a huge empty band between the hero/header and the next title.
 *
 * Below we only collapse those paddings/margins under 768px.
 */

@media (max-width: 768px) {
  /* ---------- Home (index.html) ---------- */
  /* Hero image: cover the container so it looks a bit taller on phones,
     cropping ~12% off each side of the wide collage. The original aspect
     ratio is ~2.73:1; forcing 2:1 here gives that ~12% lateral crop. */
  .ms-hero-img {
    aspect-ratio: 2 / 1;
    overflow: hidden;
  }
  .ms-hero-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }

  /* First section right after the hero collage ("Mariano Sánchez / Basketball Coach") */
  .vc_custom_1675243560381 {
    padding-top: 32px !important;
  }
  /* "My History" section */
  .vc_custom_1675240073036 {
    padding-top: 32px !important;
  }

  /* ---------- About-me ---------- */
  /* "Mariano Sánchez / Basketball Coach" hero-title section */
  .vc_custom_1422810001494 {
    padding-top: 32px !important;
  }
  /* "Gallery / Mentors - Experiences" section */
  .vc_custom_1674467995708 {
    padding-top: 32px !important;
  }
  /* "Press / Newspapers, Social Media and Others" section */
  .vc_custom_1675303920589 {
    padding-top: 32px !important;
  }

  /* The basketball-icon divider under each section title has a 68px
     bottom margin baked into the page. Tighten it on mobile so the
     gap between the divider and the gallery / carousel isn't huge. */
  #l_dvmkexj80n736thtm7zm,
  #l_q8ad7fh2phyn60pececp {
    margin-bottom: 24px !important;
  }

  /* Re-enable the timeline's vertical connector on mobile. The theme
     hides it under 767px and forces it to 1px in `.simple` mode. Bump
     the width here so the segments visible in the gaps between event
     cards (margin-bottom: 50px) read as a clear connector. */
  .timeline_event_ctn .v_line,
  .simple.timeline_event_ctn .v_line {
    display: block !important;
    width: 4px !important;
    margin-left: -2px !important;
    border-radius: 2px !important;
  }
}