/*
 * [upcoming_events] shortcode (events/upcoming-events.php).
 *
 * Keeps the legacy "MEC Upcoming Events" .mec-ue-* class names (existing
 * custom CSS targets them). Registered without dependencies: it declares no
 * variables of its own and .mec-ue-wrap is outside the scope of
 * assets/shared/tokens.css, so var(--blue), var(--gray), var(--green),
 * var(--dark-blue), var(--font-main), var(--text-*), var(--bold)... must be
 * provided by the theme (or by a tokens scope on an ancestor).
 *
 * Rules saved in Events > "Upcoming Shortcode" are printed inline AFTER this
 * file (overrides only), so editing this file always reaches the front end.
 */

/* Container. Side margins in % (of the container), not vw: the section
   container has a max-width, so vw margins keep growing with the viewport
   and end up squeezing the widget until it disappears on wide screens /
   when zoomed out. */
.mec-ue-wrap { margin: 0 5% 0 7%; overflow: visible; }
.mec-ue-empty { color: #a0aab4; font-style: italic; }

/* ===== EVENT CARD ===== */
.mec-ue-event {
    display: flex !important;
    flex-direction: row !important;
    overflow: visible;
    color: var(--blue);
    min-height: 27.2rem;
    margin: 0 !important;
    position: relative;
    background: linear-gradient(
      to right,
      white 93%,
      var(--blue) 7%
    );
}


/* ===== DATE BLOCK ===== */
.mec-ue-date-block {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mec-ue-day {
    font-family: var(--font-main);
    font-size: var(--text-35);
    font-weight: var(--bold);
    line-height: 1.1;
    color: var(--blue);
}
.mec-ue-month {
    font-family: var(--font-main);
    font-size: var(--text-35);
    font-weight: var(--light);
    color: var(--blue);
    margin-bottom: 0.5rem;
}

/* ===== CONTENT ===== */
.mec-ue-content {
    background: #fff;
    display: flex;
    flex-direction: column;
    margin: 2.3rem 0 2.3rem 2.5vw !important;
    width: 70%;
    padding: 0 !important;
}
.mec-ue-category {
    background: var(--blue);
    font-family: var(--font-main);
    font-size: var(--text-11);
    font-weight: var(--bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 1.4vw;
    margin-top: 0;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    color: white;
}
/* No category: takes the same space as the tag but stays invisible, so the
   card lines up with those that have a category (see render_event()). */
.mec-ue-category--empty {
    background: transparent;
    color: transparent;
    visibility: hidden;
}
.mec-ue-title {
    font-family: var(--font-main);
    font-size: var(--text-33);
    line-height: 1.5 !important;
    font-weight: var(--bold);
    margin-top: 0.5rem;
}
.mec-ue-title a {
    color: var(--blue);
    text-decoration: none;
}

.mec-ue-title a:hover {
    color: var(--gray);
}

.mec-ue-time {
    font-family: var(--font-main);
    font-size: var(--text-14);
    color:  var(--gray);
    margin-bottom: 6px;
}
.mec-ue-allday {
    font-family: var(--font-main);
    font-style: italic;
    color:  var(--gray);
}
.mec-ue-venue {
    font-family: var(--font-main);
    font-size: var(--text-18);
    text-decoration: uppercase;
    color:  var(--gray);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mec-ue-venue-addr {
    font-family: var(--font-main);
    color:  var(--gray);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mec-ue-excerpt {
    font-size: var(--text-25);
    color:  var(--blue);
    font-weight: var(--light);
    margin: 5% 0 0 0 !important;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    /* Fallback: on desktop (> 1024px) the text-fit script overrides this per
       card (6 lines - title lines). 5 covers the one-line-title case. */
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.mec-ue-link {
    display: inline-block;
    font-size: var(--text-19-5);
    font-weight: var(--semi-bold);
    color: var(--gray);
    text-decoration: none;
    padding: 4px 18px;
    border: 1px solid var(--gray);
    border-radius: 4px;
    transition: all .2s;
    align-self: flex-start;
    margin-top: auto;
}


.mec-ue-link {
    display: inline-block;
    font-size: var(--text-19-5);
    font-weight: var(--semi-bold);
    color: var(--gray);
    text-decoration: none;
    padding: 4px 18px;
    border: 1px solid var(--gray);
    border-radius: 4px;
    transition: all .2s;
    align-self: flex-start;
    margin-top: auto;
}

.mec-ue-link:hover {
    background: var(--gray);
    color: #fff !important;
}

/* ===== IMAGE (right side) ===== */
.mec-ue-image {
    flex: 1 1 100%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  	margin: 3% 0.5vw 3% 1vw !important;
  	border: 2px solid var(--green);
  	border-radius: 27px 0 27px 0 !important;
    height: 23rem;
    overflow: hidden;
}

.mec-ue-image a {
    display: block;
    height: 100%;
}

.mec-ue-image img {
    width: 100%;
    height: 100%; 
    object-fit: contain;
}


/* ===== LAYOUT: LIST ===== */
.mec-ue-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-right: 20px;
}

/* ===== LAYOUT: GRID ===== */
.mec-ue-grid {
    display: grid;
    grid-template-columns: repeat(var(--mec-ue-cols, 2), 1fr);
    gap: 35px 30px;
    padding-right: 20px;
}
.mec-ue-grid .mec-ue-image {
    flex: 0 0 200px;
}

/* ===== LAYOUT: COMPACT ===== */
.mec-ue-compact {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 20px;
}
.mec-ue-compact .mec-ue-event {
    min-height: 100px;
    border-radius: 6px;
}
.mec-ue-compact .mec-ue-date-block {
    flex: 0 0 90px;
    padding: 15px;
}
.mec-ue-compact .mec-ue-day { font-size: var(--text-22); }
.mec-ue-compact .mec-ue-month { font-size: var(--text-14); }
.mec-ue-compact .mec-ue-content { padding: var(--text-16); }
.mec-ue-compact .mec-ue-link { font-size: var(--text-16); }
.mec-ue-compact .mec-ue-title { font-size: var(--text-16); margin-bottom: 4px; }
.mec-ue-compact .mec-ue-excerpt { display: none; }
.mec-ue-compact .mec-ue-image { flex: 0 0 140px; }

/* ===== LAYOUT: CAROUSEL ===== */
.mec-ue-carousel {
    position: relative;
    overflow: hidden;
    padding: 0.8rem 0 0 0 ;
}
.mec-ue-carousel-track {
    display: flex;
    transition: transform .4s ease;
}
.mec-ue-carousel .mec-ue-event {
    flex: 0 0 100%;
    min-width: 100%;
    border-radius: 0;
    box-sizing: border-box;
}
.mec-ue-carousel .mec-ue-image {
    margin-right: 0;
}
.mec-ue-carousel-nav {
    display: flex;
    justify-content: center;
    gap: 5%;
    padding: 0 0 15px;
    margin-top: 1rem;
}
/* The arrow is drawn as an SVG mask (::before) so it is geometrically centred
   in the button and lines up with the dots; the ‹ › text glyph sits below the
   centre of its line box, so it is hidden with font-size: 0. */
.mec-ue-carousel-prev,
.mec-ue-carousel-next {
    width: var(--text-49);
    height: var(--text-49);
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
    color: white;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mec-ue-carousel-prev::before,
.mec-ue-carousel-next::before {
    content: "";
    width: 60%;
    height: 60%;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
            mask: center / contain no-repeat;
}
.mec-ue-carousel-prev::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4 L7 12 L15 20'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4 L7 12 L15 20'/%3E%3C/svg%3E");
}
.mec-ue-carousel-next::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 L17 12 L9 20'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 L17 12 L9 20'/%3E%3C/svg%3E");
}


@media (max-width: 1024px) {
    .mec-ue-grid { grid-template-columns: 1fr; }
    .mec-ue-event {
        flex-direction: column !important;
        padding: 0 15px;
        min-height: 0;
        /* Card background: 80% white / 20% blue, hard stop (no fade). */
        background: linear-gradient( to bottom, #fff 80%, var(--blue) 20% );
    }
    /* Force the order: content on top, image below (even if theme CSS tries to reorder). */
    .mec-ue-content { order: 0 !important; }
    .mec-ue-image   { order: 1 !important; }
    /* Cards in the same row are stretched to the same height (carousel track
       / grid). The text block grows to fill the spare space, so the image
       always sits at the bottom of the card and the images line up whatever
       the title length. */
    .mec-ue-content { flex-grow: 1; }
    .mec-ue-left {
        flex-direction: row;
    }
    /* Image centred over the card background (the card's blue band stays
       visible below it). Fixed-ratio box so EVERY banner has exactly the
       same size, whatever the original image dimensions. */
    .mec-ue-image {
        flex: none !important;
        width: 90%;
        align-self: center;
        aspect-ratio: 3 / 2;
        height: auto;
        margin: 0 auto 1.2rem !important;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mec-ue-image a {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0 auto;
        display: block;
    }
    .mec-ue-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0 auto;
        display: block;
    }

    /* 2 columns: everything (day, month, category, time, venue, button) in
       the left column; only the title in the right column (spanning 6 rows).
       Auto-placement keeps the left stack gap-free even when venue/time are
       missing. minmax(0, 1fr) stops the title from overflowing.
       The left column is capped at 40% (fit-content): with `auto`, a long
       venue ("Anfiteatro Abreu Faro at Instituto Superior Técnico") took the
       whole width on phones and squeezed the title to one letter per line. */
    .mec-ue-content {
        display: grid !important;
        grid-template-columns: fit-content(40%) minmax(0, 1fr);
        /* The title spans 6 rows but the left column often has fewer items
           (venue / time are optional). With auto rows the title's height was
           shared out over all 6, spreading the left items apart and leaving
           empty rows under them. A last 1fr row takes the title's extra
           height instead (an item spanning a flexible track only grows that
           track), so the left stack stays packed at the top. */
        grid-template-rows: repeat(5, auto) 1fr;
        column-gap: 15px;
        row-gap: 6px;
        align-items: start;
        /* flex-grow (above) makes this grid taller than its rows when the
           card is stretched to the height of its neighbour; without this the
           spare height is shared out among the auto rows, so date / category
           / button / title drift down by a different amount in each card.
           Pack the rows at the top and leave the slack below them. */
        align-content: start;
    }
    .mec-ue-content > * {
        grid-column: 1;
        align-self: start;
    }
    .mec-ue-content .mec-ue-date-block { flex: none; border-right: none; }
    .mec-ue-content .mec-ue-category { margin: 0; }
    .mec-ue-content .mec-ue-link {
        margin: 6px 0 0;
        justify-self: start;
        width: fit-content;
    }
    .mec-ue-content .mec-ue-title {
        grid-column: 2;
        grid-row: 1 / span 6;
        align-self: start;
        margin: 0;
    }

    .mec-ue-day   { font-size: var(--text-26); }
    .mec-ue-month { font-size: var(--text-22); }
    .mec-ue-title { font-size: var(--text-26); line-height: 1.3; }
}


/* ===== RESPONSIVE ===== */
@media (max-width: 760px) {


     .mec-ue-wrap {
        margin: 5px 0px;
    }

    .mec-ue-list,
    .mec-ue-grid,
    .mec-ue-compact {
        padding-right: 5px; /* tighter side spacing */
    }

    .mec-ue-content {
    	column-gap: 20px;
        width: 100%;
        margin: 1.5rem 0 0.8rem !important;
    }
    .mec-ue-grid { grid-template-columns: 1fr; }

    .mec-ue-event {
        padding: 5% 5% 5% 5%; /* tighter inner padding */
        flex-direction: column !important;
        min-height: 0;
        /* Card background: 80% white / 20% blue, hard stop (no fade). */
        background: linear-gradient( to bottom, #fff 80%, var(--blue) 20% );
    }

    .mec-ue-left {
        flex-direction: row;
    }

    .mec-ue-link a{
    	width: 12.5% !important;
        font-size: var(--text-11);
    }
    /* Same fixed-ratio image box as the <= 1024px block above. */
    .mec-ue-image {
        flex: none !important;
        width: 90%;
        align-self: center;
        aspect-ratio: 3 / 2;
        height: auto;
        margin: 0 auto 1.2rem !important;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mec-ue-image a {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0 auto;
        display: block;
    }
    .mec-ue-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0 auto;
        display: block;
    }
    .mec-ue-date-block {
        flex: 0 0 100px;
    }
}

/* ===== NARROW CARD: TITLE BELOW (<= 1024px) =====
   The <= 1024px layout puts date / category / button in a left column and
   the title in a right column. On a narrow card (e.g. 2 cards per row on a
   tablet) the title column ends up ~100px wide and words break mid-word.
   So .mec-ue-content is a size container and, when IT is narrower than
   300px, the layout becomes:
       [ date (day / month) ]
       [ category           ]
       [ time / venue       ]
       [ details            ]
       [ title, full width  ]
       [ excerpt, full width]
   It depends on the card's real width, not the viewport, so it works for any
   number of cards per row. A full-width card on a phone (content ~320px+)
   keeps the side-by-side layout. Threshold: change the 300px below.
   Scoped to <= 1024px on purpose: on desktop the card itself is the
   container and the cqw sizes of .mec-ue-carousel--multi resolve against it. */
@media (max-width: 1024px) {
    .mec-ue-content {
        container-type: inline-size;
        container-name: mec-ue-content;
    }
    /* (A container query cannot restyle .mec-ue-content itself, so its
       2-column grid stays: the stacked items sit in column 1 and the title /
       excerpt span both columns, i.e. the full width.) */
    @container mec-ue-content (max-width: 300px) {
        .mec-ue-content > * {
            grid-column: 1;
        }
        .mec-ue-content .mec-ue-title {
            grid-column: 1 / -1;
            grid-row: auto;
            order: 98;
            margin-top: 10px;
        }
        .mec-ue-content .mec-ue-excerpt {
            grid-column: 1 / -1;
            order: 99;
        }
    }
}

/* ===== GRID: TABLET / MOBILE COLUMNS =====
   Only grids rendered with columns_tablet / columns_mobile get
   .mec-ue-grid--responsive, so the others keep the single column above.
   Breakpoints match the rest of this file (1024 / 760px). */
@media (max-width: 1024px) {
    .mec-ue-grid.mec-ue-grid--responsive { grid-template-columns: repeat(var(--mec-ue-cols-tablet, 1), minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .mec-ue-grid.mec-ue-grid--responsive { grid-template-columns: repeat(var(--mec-ue-cols-mobile, 1), minmax(0, 1fr)); }
}

/* ===== CAROUSEL: SEVERAL VISIBLE CARDS =====
   visible / visible_tablet / visible_mobile. Gated by .mec-ue-carousel--multi,
   so carousels without them keep one full-width card per slide.
   --mec-ue-vis is the count for the current breakpoint; the carousel JS reads
   it to know how far it can scroll. Gap: --mec-ue-carousel-gap. */
.mec-ue-carousel.mec-ue-carousel--multi { --mec-ue-vis: var(--mec-ue-visible, 1); }
@media (max-width: 1024px) {
    .mec-ue-carousel.mec-ue-carousel--multi { --mec-ue-vis: var(--mec-ue-visible-tablet, 1); }
}
@media (max-width: 760px) {
    .mec-ue-carousel.mec-ue-carousel--multi { --mec-ue-vis: var(--mec-ue-visible-mobile, 1); }
}
.mec-ue-carousel--multi .mec-ue-carousel-track { gap: var(--mec-ue-carousel-gap, 30px); }
.mec-ue-carousel--multi .mec-ue-carousel-track > .mec-ue-event {
    flex: 0 0 calc((100% - (var(--mec-ue-vis) - 1) * var(--mec-ue-carousel-gap, 30px)) / var(--mec-ue-vis));
    min-width: 0;
}

/* Desktop (> 1024px) row card scaled to its own width, so 2+ visible cards
   look like smaller copies of the full-width card instead of keeping the
   full-size text and squeezing the image. The card is a size container and
   every fixed size above (rem / vw / px) is restated in cqw for a ~1000px
   reference card (1cqw = 10px there), so a full-width card looks the same.
   Text has a px floor (max()) to stay readable on narrow cards. <= 1024px is
   left alone: the card already stacks there. */
@media (min-width: 1025px) {
    .mec-ue-carousel--multi .mec-ue-event { container-type: inline-size; min-height: 0; }
    .mec-ue-carousel--multi .mec-ue-content { margin: 3.7cqw 0 3.7cqw 3.7cqw !important; }
    /* The image box follows the card's height (stretch) instead of a fixed
       36.8cqw, vertically centred by equal 7% top / bottom margins. The link
       and img are absolutely positioned so the picture does not add to the
       card's height: the text sets it and the image fills what is left
       (cover, cropping the banner's edges when the ratios differ). */
    .mec-ue-carousel--multi .mec-ue-image { position: relative; height: auto; align-self: stretch; overflow: hidden; margin: 7% 0.8cqw 7% 1.5cqw !important; border-radius: 2.7cqw 0 2.7cqw 0 !important; }
    .mec-ue-carousel--multi .mec-ue-image a { position: absolute; inset: 0; }
    .mec-ue-carousel--multi .mec-ue-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .mec-ue-carousel--multi .mec-ue-date-block { flex-basis: 10cqw; }
    .mec-ue-carousel--multi .mec-ue-day,
    .mec-ue-carousel--multi .mec-ue-month { font-size: max(18px, 3.5cqw); }
    .mec-ue-carousel--multi .mec-ue-title { font-size: max(15px, 3.3cqw); }
    .mec-ue-carousel--multi .mec-ue-excerpt { font-size: max(13px, 2.5cqw); }
    .mec-ue-carousel--multi .mec-ue-venue { font-size: max(12px, 1.8cqw); }
    .mec-ue-carousel--multi .mec-ue-time { font-size: max(11px, 1.4cqw); }
    .mec-ue-carousel--multi .mec-ue-link { font-size: max(12px, 1.95cqw); padding: max(2px, 0.4cqw) max(8px, 1.8cqw); }
    .mec-ue-carousel--multi .mec-ue-category { font-size: max(9px, 1.1cqw); padding: 0.25rem max(6px, 2.1cqw); }
}

/* ===== CAROUSEL: DOTS (dots="yes") =====
   One button per position, between the arrows (built by the carousel JS).
   Same shape as the site's .carousel-dot: filled 12px dot when inactive
   (dark blue), 10px hollow dot with a 3px ring when active (white). */
.mec-ue-carousel-nav { align-items: center; }
.mec-ue-carousel-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
}
.mec-ue-carousel-dot {
    width: 12px;
    height: 12px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    box-shadow: 0 0 0 3px var(--dark-blue);
    cursor: pointer;
    transition: all .2s;
}
.mec-ue-carousel-dot.is-active {
    width: 10px;
    height: 10px;
    background: transparent;
    box-shadow: 0 0 0 3px #fff;
}