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

@media (max-width: 1279px){

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

  .hero__scroll{ display: none !important; }

  /* ---------- 2. FESTIVAL FORMAT ---------- */

  .s-fmt__p{ line-height: 2.6rem !important; }

  .fmt{ display: flex; flex-direction: column; }
  .fmt__row{
    display: grid !important;
    grid-template-columns: 3.4rem 1fr;
    align-items: baseline;
    gap: .6rem 0;
    padding: 2.4rem 0;
    background: none !important;      /* paralelo.css:90 tints row 1 by rem height */
    border-top: 1px solid rgba(239,235,227,.07);
  }
  .fmt__row--1{ background: rgba(239,235,227,.017) !important; padding: 2.4rem 1.2rem; }
  .fmt__row--5{ border-bottom: 1px solid rgba(239,235,227,.07); }

  .fmt__n{ grid-column: 1; grid-row: 1; color: rgba(239,235,227,.34) !important; }

  /* paralelo.css:123-133 use two classes (.fmt__row--N .fmt__name), so a
     single class cannot win — go through .fmt__row to match specificity */
  .fmt__row .fmt__name{
    grid-column: 2; grid-row: 1;
    font-size: 2.4rem !important;
    line-height: 1.15 !important;
    color: var(--cream) !important;
  }
  .fmt__row .fmt__sub{
    grid-column: 2; grid-row: 2;
    color: var(--gold) !important;
  }
  .fmt__row .fmt__desc{
    grid-column: 2; grid-row: 3;
    text-align: left !important;
    font-size: 1.5rem !important;
    line-height: 2.3rem !important;
  }

  /* ---------- 3. OFFICIAL SELECTION ---------- */

  .s-off__p1, .s-off__p2{ line-height: 2.6rem !important; }
  .s-off__k{ margin-top: 1.6rem; }
  .s-off__frame{
    display: flex; flex-direction: column; gap: .8rem;
    width: 100% !important;
    padding: 2.8rem 2.4rem;
    border: 1px solid rgba(199,168,110,.55);
  }
  .s-off__frame::before,
  .s-off__frame::after{ display: none; }
  .s-off__ftitle{ font-size: 2.8rem !important; line-height: 1.15 !important; }

  /* ---------- 4. AWARDS ---------- */

  .s-awd__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-awd > *:not(.s-awd__bg){ z-index: 1; }
  .s-awd__p{ line-height: 2.6rem !important; }

  .s-awd__note{
    display: flex; flex-direction: column; gap: .9rem;
    width: 100% !important;
    padding-left: 1.6rem;
    border-left: 1px solid rgba(239,235,227,.22);
  }
  .s-awd__note::before{ display: none; }    /* replaced by the border above */
  .s-awd__nt{ line-height: 2.5rem !important; }

  /* ---------- 5. KEY DATES ---------- */

  .kd{ display: flex; flex-direction: column; }
  .kd__row{
    display: grid !important;
    grid-template-columns: 3.4rem 1fr auto;
    align-items: baseline;
    gap: .5rem 1rem;
    padding: 2.2rem 0;
    border-top: 1px solid rgba(239,235,227,.07);
  }
  .kd__row--7{ border-bottom: 1px solid rgba(239,235,227,.07); }

  .kd__row .kd__n{ grid-column: 1; grid-row: 1; color: rgba(239,235,227,.34) !important; }
  .kd__row .kd__name{
    grid-column: 2; grid-row: 1;
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }
  .kd__row .kd__name--it{ font-size: 2.1rem !important; }
  .kd__row .kd__place{ grid-column: 2; grid-row: 2; }
  .kd__row .kd__v{
    grid-column: 3; grid-row: 1;
    justify-self: end;
    font-size: 2rem !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }
  .kd__row .kd__v--gold{ font-size: 2.4rem !important; }

  .s-dates__range{ color: var(--gold) !important; }
  .s-dates__note{ line-height: 2.5rem !important; }

  /* ---------- 6. FIRST STEP ---------- */

  .s-step__p1, .s-step__p2{ line-height: 2.6rem !important; }

  .cards{ gap: 0 !important; }
  .card{
    display: flex; flex-direction: column; gap: .8rem;
    width: 100% !important;
    padding: 2rem 0 2.2rem;
    border-top: 1px solid rgba(239,235,227,.10) !important;
    border-right: none !important;
  }
  .card--on{
    padding-left: 1.6rem; padding-right: 1.6rem;
    border-top: 1px solid var(--gold) !important;
  }
  .card:last-child{ border-bottom: 1px solid rgba(239,235,227,.10) !important; }
  .card b{ font-size: 2.6rem !important; line-height: 1 !important; }

  /* ---------- 7. CTA ---------- */

  .s-cta__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-cta > *:not(.s-cta__bg){ z-index: 1; }
  .s-cta__h{
    text-align: left !important;
    font-size: 3.4rem !important;
    line-height: 1.18 !important;
  }
}


@media (max-width: 767px){

  .fmt__row, .kd__row{ grid-template-columns: 3rem 1fr; }

  /* the date moves under the name rather than fighting it for width */
  .kd__row .kd__v{
    grid-column: 2; grid-row: 3;
    justify-self: start;
    margin-top: .4rem;
  }
  .kd__row .kd__place{ grid-row: 2; }

  .fmt__row .fmt__name{ font-size: 2.1rem !important; }
  .s-off__ftitle{ font-size: 2.4rem !important; }
  .s-cta__h{ font-size: 3rem !important; }
}