/* v109 — stable proportional payment card.
   The event card keeps one approved desktop composition at every width.
   On compact screens the WHOLE card scales together: date, text, price,
   status, button and details link. Nothing reflows into another layout. */

/* The payment section is a flex screen in the master stylesheet.
   Explicitly give its container the available viewport width so it never
   collapses to intrinsic content width on a narrow window. */
.payment-page .events-featured > .container{
  flex:0 0 auto!important;
  width:min(1320px,calc(100vw - 44px))!important;
  max-width:min(1320px,calc(100vw - 44px))!important;
  margin-inline:auto!important;
  overflow:visible!important;
}

.payment-page .payment-event-scale-shell{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0 auto;
  overflow:visible;
}

/* No reveal/transform animation is allowed on this card: a transition from
   translateY to scale was the reason the composition temporarily broke and
   the right-hand action disappeared. */
.payment-page .payment-event-scale-shell .event-card-main{
  transition:none!important;
}

@media (max-width:1240px){
  .payment-page .events-featured > .container{
    width:94vw!important;
    max-width:94vw!important;
  }

  .payment-page .payment-event-scale-shell .event-card-main{
    width:1320px!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:170px minmax(0,1fr) 230px!important;
    gap:30px!important;
    align-items:center!important;
    padding:30px!important;
    border-radius:34px!important;
    margin:0!important;
    opacity:1!important;
  }

  .payment-page .payment-event-scale-shell .event-date{
    min-width:0!important;
    min-height:150px!important;
    height:auto!important;
    padding:0!important;
    gap:12px!important;
    border-radius:25px!important;
  }
  .payment-page .payment-event-scale-shell .event-date strong{
    font-size:64px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .payment-page .payment-event-scale-shell .event-date span{
    font-size:12px!important;
    line-height:1.25!important;
    letter-spacing:.08em!important;
    white-space:normal!important;
  }

  .payment-page .payment-event-scale-shell .event-card-body{min-width:0!important}
  .payment-page .payment-event-scale-shell .event-meta{gap:9px!important;flex-wrap:wrap!important}
  .payment-page .payment-event-scale-shell .event-meta span{
    padding:7px 10px!important;
    font-size:10px!important;
    letter-spacing:.08em!important;
  }
  .payment-page .payment-event-scale-shell .event-card h3{
    font-size:48px!important;
    line-height:.95!important;
    margin:14px 0 12px!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  .payment-page .payment-event-scale-shell .event-card p{
    font-size:14px!important;
    line-height:1.5!important;
    max-width:700px!important;
  }
  .payment-page .payment-event-scale-shell .event-price{
    gap:13px!important;
    margin-top:18px!important;
    align-items:baseline!important;
    flex-wrap:nowrap!important;
  }
  .payment-page .payment-event-scale-shell .event-price span{font-size:12px!important;white-space:nowrap!important}
  .payment-page .payment-event-scale-shell .event-price strong{font-size:29px!important;line-height:1!important;white-space:nowrap!important}

  .payment-page .payment-event-scale-shell .event-card-actions{
    width:230px!important;
    min-width:230px!important;
    max-width:230px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:22px!important;
    align-items:stretch!important;
    justify-content:center!important;
    justify-self:end!important;
    overflow:visible!important;
  }
  .payment-page .payment-event-scale-shell .event-status{
    width:auto!important;
    max-width:none!important;
    align-self:stretch!important;
    justify-content:flex-start!important;
    text-align:left!important;
    font-size:11px!important;
    line-height:1.2!important;
    gap:9px!important;
    white-space:nowrap!important;
  }
  .payment-page .payment-event-scale-shell .event-status i{
    width:8px!important;height:8px!important;flex:0 0 8px!important;
  }
  .payment-page .payment-event-scale-shell .event-card-actions .btn-3d{
    width:230px!important;
    min-width:230px!important;
    max-width:230px!important;
    min-height:60px!important;
    height:60px!important;
    padding:0 27px!important;
    border-radius:18px!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    text-align:center!important;
    align-self:stretch!important;
    flex:0 0 60px!important;
  }
  .payment-page .payment-event-scale-shell .event-details-link{
    width:230px!important;
    max-width:230px!important;
    align-self:stretch!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
}

@media (max-width:600px){
  .payment-page .events-featured > .container{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
  }
}