/* ===== Eventos body (flow) — ported from eventos.html inline <style> ===== */
/* FUNDO/IMAGENS composite = 1800x2525, starts at canvas y≈252; header covers 0–465.
   .eventos begins right under the nav (canvas 465). Offset bg up by (465-252)=213px = -13.31rem so it aligns. */
.eventos{background:#000 url('../../img/eventos-fundo.png') center -13.31rem / 100% auto no-repeat;padding-bottom:0}

/* two decorative rules (5px, #d9f2ec): short LEFT of line1 bleeding to left edge, long RIGHT of line2 bleeding right.
   absolute so they don't grow the heading box (bleed technique from sobre's equipe rules). */
.reg__rule--left{top:12.75rem;right:calc(100% - var(--inset) + 2.5rem);left:0;width:auto}
.reg__rule--right{top:16.8rem;left:calc(var(--inset) + 27rem);right:calc(-1 * (50vw - 56.25rem));}

/* ===== Event cards ===== */
.events{padding:10.3rem var(--inset) 0}
/* flex-direction:row + resets are explicit — Bootstrap's own .card component
   forces column and adds a white bg/border/radius; neutralize them. */
.card{display:flex;flex-direction:row;align-items:flex-start;gap:0;background:transparent;border:0;border-radius:0}
.card + .card{margin-top:10.7rem}
.card__photo{flex:0 0 auto;width:40.06rem;height:auto;align-self:center}
.card__body{flex:1 1 auto;min-width:0;position:relative;padding-top:0}
/* teal title box overlaps the photo's right edge by ~114px (box l=786, photo r=900) = 7.125rem.
   PSD Rectangle 17 is a fixed 756×240px = 47.25rem×15rem — pin the width so long CMS titles
   reflow to ~4 lines instead of stretching the chip across the whole body. */
.card__box{background:#4FBAAD;border-radius:3.4375rem 0 3.4375rem 0;margin-left:-7.125rem;padding:2.35rem 2.9rem 2.4rem 9.75rem;width:47.25rem;max-width:100%;min-height:15rem;display:flex;align-items:center}
.card__title{margin:0;font-weight:700;font-size:1.955rem;line-height:1.25;letter-spacing:var(--track);color:#fff}
.card__meta{margin:2.1rem 0 0;padding-left:9.75rem}
/* PSD excerpt truncates to ~3 lines ("…curso…"); clamp so long CMS excerpts match the compact design. */
.card__excerpt{margin:0;font-weight:300;font-style:italic;font-size:1.7rem;line-height:1.38;letter-spacing:var(--track);color:#fff;max-width:22.6rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__date{margin:0.75rem 0 0;font-weight:300;font-style:italic;font-size:1.7rem;line-height:1.38;letter-spacing:var(--track);color:#fff}
/* PSD Line 4 is a thin 5px teal (#4FBAAD) rule — force border:0 so the browser <hr> default
   gray border doesn't render a thick gray line over the teal background. */
.card__sep{border:0;height:0.3125rem;width:55rem;max-width:100%;background:#4FBAAD;opacity:1;margin:2.9rem 0 0 12.56rem}

/* ===== Carousel arrows (~canvas y2314) ===== */
.arrows{display:flex;justify-content:center;gap:5rem;padding:13.9rem 0 3.5rem}
.arrows__btn{background:none;border:0;cursor:pointer;padding:0.5rem;line-height:0;transition:opacity .15s}
.arrows__btn:disabled{opacity:.3;cursor:default}
.arrows__chev{display:block;width:1.6rem;height:1.6rem;border-right:0.375rem solid #4FBAAD;border-bottom:0.375rem solid #4FBAAD}
.arrows__chev--prev{transform:rotate(135deg)}
.arrows__chev--next{transform:rotate(-45deg)}
/* card is a link */
.card{text-decoration:none;color:inherit;transition:transform .15s}
.card:hover{transform:translateY(-0.25rem)}
.card:hover .card__box{filter:brightness(1.06)}
.card:focus-visible{outline:0.1875rem solid var(--teal);outline-offset:0.5rem}

/* ===== Responsive ===== */
@media (max-width:60rem){
  .eventos{background-position:center top}
  .reg{padding-top:3rem}
  /* neutralize the bleeding rules so there's no horizontal scroll */
  .reg__rule--left{display:none}
  .reg__rule--right{position:static;display:block;width:100%;margin-top:1rem;left:auto;right:auto}
  .reg__line2{padding-left:1.5rem}
  .events{padding-top:3rem}
  .card{flex-direction:column;gap:0}
  .card__photo{width:100%;align-self:stretch}
  .card__box{margin-left:0;padding:1.5rem;min-height:0}
  .card__meta{padding-left:0;margin-top:1.5rem}
  .card__excerpt{max-width:100%}
  .card__sep{margin-left:0;width:100%}
}