/* =========================================================
   festival.html — per-section mobile rules.
   Loaded after responsive.css.
   ========================================================= */

@media (max-width: 1279px){

  /* ---------- 1. HERO ---------- */

  .hero__title{ text-align: left !important; }
  .hero__eyebrow{ text-align: left !important; }
  .hero__c1, .hero__c2{ line-height: 2.5rem !important; }
  .hero__scroll{ display: none !important; }

  /* ---------- 2. WHY PARALELO 34 ---------- */

  .s-why__coord{ color: var(--gold) !important; }

  /* the two dashed place strips read as one caption stacked under the rule */
  .s-why__places{
    display: block;
    color: rgba(239,235,227,.38) !important;
    line-height: 1.8 !important;
  }
  /* festival.css:104 hides --b and --d on desktop; keep that */
  .s-why__rule--a,
  .s-why__rule--c{
    width: 100% !important;
    height: 1px !important;
    margin: .4rem 0 1.2rem;
  }

  .s-why__h2{ letter-spacing: -.01em !important; }
  .s-why__p1, .s-why__p2, .s-why__p3{ line-height: 2.6rem !important; }

  /* ---------- 3. OUR MISSION ---------- */

  /* the gold rule is a 3px bar the full height of the quote */
  .s-mis{ }
  .s-mis__bar{ display: none !important; }
  .s-mis__quote{
    padding-left: 1.6rem;
    border-left: 3px solid rgba(199,168,110,.55);
  }
  .s-mis__p{ line-height: 2.6rem !important; }

  .s-mis__list{ display: flex; flex-direction: column; gap: 1.2rem; }
  .s-mis__list li{
    display: flex;
    align-items: baseline;
    gap: .8rem;
    height: auto !important;
    line-height: 1.5 !important;
  }
  .s-mis__list i{ width: auto !important; flex: none; }

  /* festival.css:172, 75.6 x 77.7 — decorative span, all background */
  .s-mis__img{
    display: block;
    order: -1;
    width: 100% !important;
    aspect-ratio: 756 / 777;
    background-size: cover !important;
    background-position: center !important;
  }

  /* ---------- 4. MORE THAN AN ANNUAL EVENT ---------- */

  .s-more__c1, .s-more__c2{ line-height: 2.6rem !important; }

  .tl{ display: flex; flex-direction: column; }
  .tl__row{
    display: grid !important;
    grid-template-columns: 3.4rem 1fr;
    align-items: baseline;
    gap: .8rem 0;
    padding: 2.4rem 0;
    border-top: 1px solid rgba(239,235,227,.075);
  }
  .tl__row--3{ border-bottom: 1px solid rgba(239,235,227,.075); }

  .tl__n{ grid-column: 1; grid-row: 1; color: rgba(239,235,227,.30) !important; }
  .tl__k{ grid-column: 2; grid-row: 1; color: var(--gold) !important; }
  .tl__name{
    grid-column: 2; grid-row: 2;
    font-size: 2.4rem !important;
    line-height: 1.15 !important;
  }
  .tl__desc{
    grid-column: 2; grid-row: 3;
    text-align: left !important;
    font-size: 1.5rem !important;
    line-height: 2.3rem !important;
  }

  /* ---------- 5. ARGENTINA -> THE WORLD ---------- */

  /* full-bleed photo band: keep it absolute behind the copy */
  .s-arg__bg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0 !important;
  }
  .s-arg > *:not(.s-arg__bg){ z-index: 1; }

  .s-arg__p{ line-height: 2.6rem !important; }
  .s-arg__arrow{
    width: 8.1rem !important;
    height: 2.6rem !important;
    flex: none;
  }
  .s-arg__rule{
    width: 100% !important;
    height: 1px !important;
    margin: 1.6rem 0;
    background: rgba(239,235,227,.30);
  }
  .s-arg__tag{
    font-size: 2.8rem !important;
    line-height: 1.25 !important;
  }
}


@media (max-width: 767px){

  .s-why__places{ letter-spacing: .14em !important; }

  .tl__row{ grid-template-columns: 3rem 1fr; }
  .tl__name{ font-size: 2.1rem !important; }

  .s-arg__tag{ font-size: 2.4rem !important; }
}