@charset "utf-8";
/* ==========================================================================
   HP4U Events  
   hp4u-events_rwd.css — Single breakpoint mobile/tablet rules
   Load AFTER: hp4u-events.css, hp4u-events_v2.css
   Breakpoint: max-width: 800px
   ========================================================================== */

@media (max-width: 800px){

  /* -------------------------------------------------
     0) Global resets for mobile
     ------------------------------------------------- */

  .hp4u-events-list .hp4u-card .hp4u-card__inner::before, 
  .hp4u-events-list .hp4u-card .hp4u-card__linkarea::before { content:none !important; }

  .hp4u-card{
  
  }

  .hp4u-events-list .hp4u-card .hp4u-card__meta{
    position: static;
    background: var(--hp4u-evt-left-bg, #f5f6f7);
    margin: 0 calc(var(--hp4u-evt-pad, 16px) * -1);
    padding: 10px var(--hp4u-evt-pad, 16px) 8px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom: 0;
  }

  .hp4u-events-list .hp4u-card .hp4u-col--left .hp4u-day, 
  .hp4u-events-list .hp4u-card .hp4u-badge{
    text-transform: uppercase;
    letter-spacing: .045em;
    font-weight: var(--hp4u-evt-badge-day-weight, 500);
    font-size: .82rem;
  }

  .hp4u-events-list .hp4u-card .hp4u-col--right{
    padding-top: 0 !important;
  }
.hp4u-col--left {
	padding:0 0 10px 0!important;
    gap: 0;
	padding-top:0!important;
}
.hp4u-col--right {
	padding-top:0!important;
	margin-top:0!important;
	padding-left:0;
	padding-right:0!important;
}
	.hp4u-titlewrap{margin-top:0!important;}
  /* =====================================================================
     1) OVERVIEW (<800): stack to 1 column + left band + logos bottom-right
     ===================================================================== */

  .hp4u-events-list .hp4u-card:not(.hp4u-card--collapsible) .hp4u-card__linkarea{
    grid-template-columns: 1fr !important;
  }

  .hp4u-card .hp4u-card__linkarea{
    gap:0;
  }

  .hp4u-events-list .hp4u-card:not(.hp4u-card--collapsible) .hp4u-col--left{
    background: var(--hp4u-evt-left-bg, #f5f6f7);
    margin-left: 0;
    margin-right: 0;
    padding-left:0;
    padding-right:0;
    border-bottom: 0px solid var(--hp4u-evt-border, #e5e7eb);
  }

  .hp4u-events-list .hp4u-card:not(.hp4u-card--collapsible)
  .hp4u-card__inner:has(.hp4u-col--left .hp4u-logos){
    padding-bottom: calc(var(--hp4u-evt-pad, 16px) + 96px);
  }

  @supports not (selector(:has(*))){
    .hp4u-events-list .hp4u-card:not(.hp4u-card--collapsible) .hp4u-card__inner{
      padding-bottom: calc(var(--hp4u-evt-pad, 16px) + 64px);
    }
  }

  .hp4u-events-list .hp4u-card:not(.hp4u-card--collapsible) .hp4u-col--left .hp4u-logos{
    position: absolute;
    right: var(--hp4u-evt-pad, 16px);
    bottom: var(--hp4u-evt-pad, 16px);
    z-index: 2;
    margin:0;
    transform: translateZ(0);
  }

  .hp4u-events-list .hp4u-card:not(.hp4u-card--collapsible) .hp4u-col--left .hp4u-logos__img{
    max-width: 120px;
    height:auto;
    display:block;
  }

  /* ======================================================================================
     2) CATEGORY (<800): simple stacking (left column above right column)
      - Collapse to a single column grid
      - Keep the left "band" (day/time/slots/note) visually grouped
      - Logo stays inside the left column; no special bottom-row alignment
     ====================================================================================== */

  /* Left + right columns stack vertically, left first */
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-card__linkarea{
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 0;
  }

  /* Left column uses the tinted "band" background, full width */
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-col--left{
    background: var(--hp4u-evt-left-bg, #f5f6f7);
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0px solid var(--hp4u-evt-border, #e5e7eb);
  }

  /* Add spacing between left and right column stacks */
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-col--right{
    margin-top: 12px;
  }

}

/* =======================================================================
   CATEGORY <800px — Compact tinted box for the left group (no stripes)
   We unify Day → Main time → Slots → Note into one visual block.
   ======================================================================= */
@media (max-width: 800px){

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-day, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-timeblk--main, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-slots, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-note{
    grid-column: 1 / -1;
    background: var(--hp4u-evt-left-bg, #f5f6f7);

    margin-left: 0;
    margin-right: 0;

    padding-left: 0;
    padding-right: 0;

    margin-top: 0;
    margin-bottom: 0;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-day{
    padding-top: 0;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-timeblk--main, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-slots, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-note{
    padding-top: 6px;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-note{
    padding-bottom: 6px;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible
  .hp4u-timeblk--main + .hp4u-slots::before{
    content: none;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible:has(.hp4u-note) .hp4u-note{
    border-bottom: 1px solid var(--hp4u-evt-border, #e5e7eb);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible:not(:has(.hp4u-note)):has(.hp4u-slots) .hp4u-slots{
    border-bottom: 1px solid var(--hp4u-evt-border, #e5e7eb);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible
  :not(:has(.hp4u-note)):not(:has(.hp4u-slots)):has(.hp4u-timeblk--main) .hp4u-timeblk--main{
    border-bottom: 1px solid var(--hp4u-evt-border, #e5e7eb);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  @supports not (selector(:has(*))){

    .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-note, 
    .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-slots{
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }

  }
}

/* -----------------------------------------------------------------------
   CATEGORY <800px — Spacing between left block and content
   ----------------------------------------------------------------------- */
@media (max-width: 800px){

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-card__linkarea{
    gap: 0 1rem;
  }

  .hp4u-card .hp4u-card__inner{
    padding-top:var(--hp4u-section-pad);
    gap:0;
    padding-bottom:calc(var(--hp4u-section-pad) * 2);
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-note{
    margin-bottom: 12px;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible:not(:has(.hp4u-note)) .hp4u-slots{
    margin-bottom: 12px;
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible:not(:has(.hp4u-note)):not(:has(.hp4u-slots)) .hp4u-timeblk--main{
    margin-bottom: 12px;
  }

  @supports not (selector(:has(*))){

    .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-note, 
    .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-slots, 
    .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-timeblk--main{
      margin-bottom: 12px;
    }
  }

  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-titlewrap, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-panel, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-people, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-prices, 
  .hp4u-events-list .hp4u-card.hp4u-card--collapsible .hp4u-buttons{
    margin-top: 12px;
  }

}

/* -----------------------------------------------------------------------
   Global badge + meta tweaks (already mobile-only, but grouped here)
   ----------------------------------------------------------------------- */
@media (max-width: 800px){

  .hp4u-events-list .hp4u-card .hp4u-badge{
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    line-height: 1.15;
    letter-spacing: .03em;
    display: block;
  }

  .hp4u-events-list .hp4u-card .hp4u-card__meta{
    position: static;
    margin-bottom: .25rem;
  }

  .hp4u-events-list .hp4u-card .hp4u-col--right{
    padding-top: 0;
  }
}