/* AeroJatim Home v348 — 4-card desktop rail, 2-card phone rail,
   mostly-outside side arrows, exact pointed CTA geometry, and mobile hero overlap. */

/* Shared rail reset: later than all prior home patches. */
.home-v348 .featured-events .event-carousel-shell{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.home-v348 .featured-events .event-grid{
  display:flex!important;
  width:100%!important;
  gap:16px!important;
  padding:6px 0 16px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
  scroll-padding-inline:0!important;
  scrollbar-width:none!important;
  align-items:stretch!important;
}
.home-v348 .featured-events .event-grid::-webkit-scrollbar{display:none!important}
.home-v348 .featured-events .event-card,
.home-v348 .featured-events .navy-card{
  max-width:none!important;
  min-width:0!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:always!important;
}

/* PC: exactly four complete cards in the viewport. */
@media (min-width:1181px){
  .home-v348 .featured-events>.container{
    width:calc(100% - 72px)!important;
    max-width:none!important;
    margin-inline:36px!important;
    padding:0!important;
  }
  .home-v348 .featured-events .event-grid{gap:16px!important}
  .home-v348 .featured-events .event-card,
  .home-v348 .featured-events .navy-card{
    flex:0 0 calc((100% - 48px)/4)!important;
    width:calc((100% - 48px)/4)!important;
  }
  /* Compact the four-card layout without dropping any information. */
  .home-v348 .featured-events .event-card,
  .home-v348 .featured-events .navy-card{grid-template-rows:180px auto!important}
  .home-v348 .featured-events .poster-wrap,
  .home-v348 .featured-events .navy-card .poster-wrap{height:180px!important;min-height:180px!important}
  .home-v348 .featured-events .event-content,
  .home-v348 .featured-events .navy-card .event-content{padding:16px 15px 15px!important}
  .home-v348 .featured-events .event-content h3{font-size:clamp(21px,1.65vw,27px)!important;line-height:1.02!important;margin:6px 0 8px!important}
  .home-v348 .featured-events .event-description{font-size:10.5px!important;line-height:1.45!important;margin-bottom:8px!important}
  .home-v348 .featured-events .event-facts{margin:8px 0 11px!important}
  .home-v348 .featured-events .event-facts>div{padding:6px 0!important;min-height:36px!important}
  .home-v348 .featured-events .event-facts dd{font-size:9.4px!important}
}

/* Side controls: the button is mostly outside the card rail, with only a small inset. */
.home-v348 .event-carousel-controls{
  position:absolute!important;
  inset:0!important;
  z-index:35!important;
  display:block!important;
  pointer-events:none!important;
}
.home-v348 .event-carousel-controls button{
  position:absolute!important;
  top:50%!important;
  width:34px!important;
  height:48px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  transform:translateY(-50%)!important;
  pointer-events:auto!important;
  border:1px solid rgba(8,43,76,.14)!important;
  border-radius:12px!important;
  color:#082b4c!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 10px 24px rgba(5,34,58,.17)!important;
  backdrop-filter:blur(8px)!important;
  transition:transform .18s ease,background .18s ease,color .18s ease,opacity .18s ease!important;
}
.home-v348 .event-carousel-controls button:first-child{left:-25px!important}
.home-v348 .event-carousel-controls button:last-child{right:-25px!important}
.home-v348 .event-carousel-controls button span{display:block!important;margin-top:-2px!important;font:500 30px/.8 Arial,sans-serif!important}
.home-v348 .event-carousel-controls button:hover:not(:disabled){color:#fff!important;background:#082b4c!important}
.home-v348 .event-carousel-controls button:first-child:hover:not(:disabled){transform:translate(-2px,-50%)!important}
.home-v348 .event-carousel-controls button:last-child:hover:not(:disabled){transform:translate(2px,-50%)!important}
.home-v348 .event-carousel-controls button:disabled{opacity:.18!important;box-shadow:none!important}

/* EVENT / VIEW ALL stays one centered group. */
.home-v348 .featured-events .event-view-all-card{
  display:flex!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}
.home-v348 .event-view-all-link{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:24px 18px!important;
}
.home-v348 .event-view-all-icon{margin:0 auto 16px!important}
.home-v348 .event-view-all-link>strong{margin:0!important;text-align:center!important}

/* Restore the exact angled-corner CTA used by the normal event cards.
   The point is at the corners, not the midpoint of the sides. */
.home-v348 .event-view-all-button.event-cta{
  width:min(225px,90%)!important;
  min-width:0!important;
  min-height:50px!important;
  margin:14px auto 0!important;
  padding:0 0 0 19px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border:0!important;
  border-left:3px solid #f36b17!important;
  border-radius:0!important;
  color:#fff!important;
  background:linear-gradient(180deg,#0b3459,#061f38)!important;
  box-shadow:0 10px 22px rgba(8,43,76,.18)!important;
  clip-path:polygon(14px 0,100% 0,calc(100% - 16px) 100%,0 100%)!important;
  text-decoration:none!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
.home-v348 .event-view-all-button.event-cta>span{
  flex:1 1 auto!important;
  padding:0 16px 0 0!important;
  text-align:left!important;
  white-space:nowrap!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
}
.home-v348 .event-view-all-button.event-cta>b{
  width:52px!important;
  height:50px!important;
  flex:0 0 52px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:0!important;
  color:#fff!important;
  background:linear-gradient(180deg,#f36b17,#da4f08)!important;
  clip-path:polygon(28% 0,100% 0,78% 100%,0 100%)!important;
  font-size:20px!important;
}
.home-v348 .event-view-all-button.event-cta:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.04)!important;
  box-shadow:0 14px 28px rgba(8,43,76,.24)!important;
}

/* Tablet remains two full cards, with arrows mostly outside the rail. */
@media (min-width:761px) and (max-width:1180px){
  .home-v348 .featured-events>.container{
    width:calc(100% - 48px)!important;
    max-width:none!important;
    margin-inline:24px!important;
    padding:0!important;
  }
  .home-v348 .featured-events .event-grid{gap:16px!important}
  .home-v348 .featured-events .event-card,
  .home-v348 .featured-events .navy-card{
    flex:0 0 calc((100% - 16px)/2)!important;
    width:calc((100% - 16px)/2)!important;
  }
  .home-v348 .event-carousel-controls button{width:32px!important;height:46px!important}
  .home-v348 .event-carousel-controls button:first-child{left:-22px!important}
  .home-v348 .event-carousel-controls button:last-child{right:-22px!important}
}

/* Phone: two cards are visible at once, as requested. The content is compacted,
   but remains readable and tappable. The hero copy overlaps the banner slightly. */
@media (max-width:760px){
  .home-v348 .aero-hero .hero-grid{
    padding-top:0!important;
    margin-top:-72px!important;
    position:relative!important;
    z-index:5!important;
  }
  .home-v348 .aero-hero .hero-copy{
    position:relative!important;
    z-index:5!important;
    padding-top:20px!important;
  }

  .home-v348 .featured-events{padding:28px 0 42px!important}
  .home-v348 .featured-events>.container{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 14px!important;
  }
  .home-v348 .featured-events .home-events-heading{margin-bottom:14px!important}
  .home-v348 .featured-events .event-grid{gap:10px!important;padding:5px 0 13px!important}
  .home-v348 .featured-events .event-card,
  .home-v348 .featured-events .navy-card{
    flex:0 0 calc((100% - 10px)/2)!important;
    width:calc((100% - 10px)/2)!important;
    min-width:0!important;
    max-width:none!important;
    border-radius:14px!important;
    grid-template-rows:118px auto!important;
  }
  .home-v348 .featured-events .poster-wrap,
  .home-v348 .featured-events .navy-card .poster-wrap{
    height:118px!important;
    min-height:118px!important;
  }
  .home-v348 .featured-events .event-date-badge{
    width:43px!important;
    height:49px!important;
    top:7px!important;
    right:7px!important;
  }
  .home-v348 .featured-events .event-date-badge strong{font-size:20px!important}
  .home-v348 .featured-events .event-date-badge span{font-size:7px!important}
  .home-v348 .featured-events .event-content,
  .home-v348 .featured-events .navy-card .event-content{padding:11px 10px 10px!important}
  .home-v348 .featured-events .event-content h3{
    margin:4px 0 7px!important;
    font-size:17px!important;
    line-height:1.04!important;
    min-height:0!important;
    -webkit-line-clamp:3!important;
  }
  .home-v348 .featured-events .event-labels{gap:3px!important;margin-bottom:6px!important}
  .home-v348 .featured-events .event-labels span,
  .home-v348 .featured-events .category-pills span{font-size:6.7px!important;padding:4px 5px!important}
  .home-v348 .featured-events .category-pills{gap:3px!important;margin-bottom:6px!important}
  .home-v348 .featured-events .event-description{
    margin:0 0 7px!important;
    font-size:9.2px!important;
    line-height:1.38!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
  }
  .home-v348 .featured-events .event-facts{grid-template-columns:1fr!important;margin:6px 0 8px!important;gap:0!important}
  .home-v348 .featured-events .event-facts>div{min-height:0!important;padding:5px 0!important}
  .home-v348 .featured-events .event-facts dt{display:none!important}
  .home-v348 .featured-events .event-facts dd{font-size:8.4px!important;line-height:1.28!important}
  .home-v348 .featured-events .event-facts small{font-size:6px!important;margin-bottom:2px!important}
  .home-v348 .featured-events .event-cta{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding-left:10px!important;
  }
  .home-v348 .featured-events .event-cta span{padding-right:5px!important;font-size:6.6px!important;letter-spacing:.07em!important}
  .home-v348 .featured-events .event-cta b,
  .home-v348 .featured-events .navy-card .event-cta b{width:38px!important;height:40px!important;flex-basis:38px!important;font-size:16px!important}

  .home-v348 .event-carousel-controls button{width:27px!important;height:40px!important;border-radius:10px!important}
  .home-v348 .event-carousel-controls button:first-child{left:-12px!important}
  .home-v348 .event-carousel-controls button:last-child{right:-12px!important}
  .home-v348 .event-carousel-controls button span{font-size:25px!important}

  .home-v348 .event-view-all-card,
  .home-v348 .event-view-all-link{min-height:0!important}
  .home-v348 .event-view-all-link{padding:18px 9px!important}
  .home-v348 .event-view-all-icon{
    width:98px!important;
    height:98px!important;
    margin:0 auto 11px!important;
    border-radius:26px!important;
  }
  .home-v348 .event-view-all-icon svg{width:68px!important;height:68px!important}
  .home-v348 .event-view-all-link>strong{font-size:33px!important;line-height:.92!important}
  .home-v348 .event-view-all-button.event-cta{
    width:90%!important;
    min-height:40px!important;
    margin:10px auto 0!important;
    padding-left:10px!important;
    border-left-width:2px!important;
    clip-path:polygon(10px 0,100% 0,calc(100% - 11px) 100%,0 100%)!important;
  }
  .home-v348 .event-view-all-button.event-cta>span{padding-right:5px!important;text-align:left!important;font-size:6.8px!important}
  .home-v348 .event-view-all-button.event-cta>b{
    width:38px!important;
    height:40px!important;
    flex:0 0 38px!important;
    clip-path:polygon(28% 0,100% 0,78% 100%,0 100%)!important;
    font-size:16px!important;
  }
  .home-v348 .event-carousel-foot{display:none!important}
}

@media (max-width:430px){
  .home-v348 .aero-hero .hero-grid{margin-top:-66px!important}
  .home-v348 .featured-events>.container{padding-inline:10px!important}
  .home-v348 .featured-events .event-grid{gap:8px!important}
  .home-v348 .featured-events .event-card,
  .home-v348 .featured-events .navy-card{
    flex-basis:calc((100% - 8px)/2)!important;
    width:calc((100% - 8px)/2)!important;
    grid-template-rows:108px auto!important;
  }
  .home-v348 .featured-events .poster-wrap,
  .home-v348 .featured-events .navy-card .poster-wrap{height:108px!important;min-height:108px!important}
  .home-v348 .featured-events .event-content h3{font-size:15.8px!important}
  .home-v348 .featured-events .event-description{font-size:8.7px!important}
  .home-v348 .event-view-all-icon{width:88px!important;height:88px!important}
  .home-v348 .event-view-all-icon svg{width:61px!important;height:61px!important}
  .home-v348 .event-view-all-link>strong{font-size:30px!important}
}
