/*
 * Events redesign (/events/football-matchmaking-lisbon and /events/football-matchmaking), loaded after
 * style_index_min.css. The templates keep their markup and texts; each section only got a hook class
 * (sd-ev-hero, sd-ev-details, sd-ev-lists, sd-ev-numbers, sd-ev-audience, sd-ev-faq, sd-ev-final...) inside
 * main.sd-event. The Lisbon ticket modal sits outside main and is styled through .lisbon-ticket-modal.
 */

/* ------------------------------------------------------------------ Tokens */

.sd-event,
.lisbon-ticket-modal {
  --sd-text: #1B2333;
  --sd-body: #435066;
  --sd-muted: #5F6A7D;
  --sd-line: #E3E8EF;
  --sd-ground: #F2F4F7;
  --sd-card: #FFFFFF;
  --sd-navy: #111827;
  --sd-green: #50D878;
  --sd-green-text: #157A43;
  --sd-green-soft: rgba(80, 216, 120, 0.14);
  --sd-radius: 1rem;
  --sd-shadow: 0 1px 2px rgba(27, 35, 51, 0.06), 0 12px 28px -16px rgba(27, 35, 51, 0.35);
  --sd-shadow-hover: 0 2px 4px rgba(27, 35, 51, 0.06), 0 28px 48px -20px rgba(27, 35, 51, 0.5);
  --sd-dots: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.sd-event {
  display: flow-root;
  background: var(--sd-ground) !important;
}

/* style_index_min.css gives every section a 100px bottom margin; spacing here is set per block */
.sd-event section {
  margin-bottom: 0 !important;
}

/* Section titles of the light sections */
.sd-event .sd-ev-details h2.fs-4,
.sd-event .sd-ev-numbers h2.fs-4 {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px;
  color: var(--sd-text) !important;
}

/* ------------------------------------------------------------------ Hero */

.sd-event .sd-ev-hero {
  overflow: hidden;
}

/* Dark fade over the photo, strongest at the bottom, with a soft green glow */
.sd-event .sd-ev-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(80, 216, 120, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.55) 0%, rgba(17, 24, 39, 0.75) 60%, rgba(17, 24, 39, 0.95) 100%);
  pointer-events: none;
}

.sd-event .sd-ev-hero > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 4.5rem !important;
  padding-bottom: 4rem;
  border-bottom: 0 !important;
}

.sd-event .sd-ev-hero h1 {
  margin-top: 0 !important;
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
  line-height: 1.05;
  font-weight: 800 !important;
  letter-spacing: -1.2px;
  text-wrap: balance;
}

.sd-event .sd-ev-hero .lead {
  color: #D5DCE6 !important;
}

/* Place and date as glass pills */
.sd-event .sd-ev-hero p.fs-4 {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0.25rem 0.75rem !important;
  padding: 0.5rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

.sd-event .sd-ev-hero p.fs-4 i {
  color: var(--sd-green);
}

/* The "|" between the pills is not needed any more */
.sd-event .sd-ev-hero p.fs-4 .d-sm-inline {
  display: none !important;
}

/* Book a Demo outlined in white on the dark hero and on the final band */
.sd-event :is(.sd-ev-hero, .sd-ev-final) .btn.google-analytics-calendly {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
  background-color: transparent;
}

.sd-event :is(.sd-ev-hero, .sd-ev-final) .btn.google-analytics-calendly:is(:hover, :focus-visible, :active) {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------ Partner logos */

.sd-event .sd-ev-trust {
  padding: 1rem 0 0.5rem;
  background: #FFFFFF;
}

.sd-event .sd-ev-trust h2 {
  font-size: 0.8125rem !important;
  letter-spacing: 0.12em;
  color: #5F6A7D !important;
}

.sd-event .sd-ev-trust .lp-partners-cards {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.sd-event .sd-ev-trust .lp-partners-cards img {
  transition: transform .2s ease;
}

.sd-event .sd-ev-trust .lp-partners-cards:hover img {
  transform: scale(1.06);
}

/* ------------------------------------------------------------------ Countdown (hero, Lisbon) */

.sd-event .sd-ev-countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 1.375rem;
  border-radius: 999px;
  background: var(--sd-green);
  color: var(--sd-navy);
  box-shadow: 0 0 0 6px rgba(80, 216, 120, 0.18), 0 16px 32px -12px rgba(80, 216, 120, 0.6);
}

.sd-event .sd-ev-countdown[hidden] {
  display: none;
}

.sd-event .sd-ev-countdown-value {
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1px;
}

.sd-event .sd-ev-countdown-label {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Event details: venue photo and a fact sheet */

.sd-event .sd-ev-details {
  background: var(--sd-ground) !important;
}

.sd-event .sd-ev-sheet {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3.5rem;
  align-items: center;
  max-width: 68rem;
  margin: 1rem auto;
}

.sd-event .sd-ev-sheet-photo {
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 4 / 5;
  max-height: 32rem;
  box-shadow: 0 24px 48px -28px rgba(17, 24, 39, 0.55);
}

.sd-event .sd-ev-sheet-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}

.sd-event .sd-ev-sheet-photo:hover img {
  transform: scale(1.04);
}

.sd-event .sd-ev-sheet-body h2 {
  margin-bottom: 1.75rem;
  text-align: left;
}

/* Rows: small label on the left, the value on the right, a hairline between them */
.sd-event .sd-ev-sheet-list {
  margin: 0;
  border-top: 2px solid var(--sd-text);
}

.sd-event .sd-ev-sheet-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.125rem 0;
  border-bottom: 1px solid #D9DFE7;
}

.sd-event .sd-ev-sheet-row dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sd-muted);
}

.sd-event .sd-ev-sheet-row dd {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--sd-text);
}

/* The date is the line that matters most */
.sd-event .sd-ev-sheet-row--date dd {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.6px;
}

@media (max-width: 991.98px) {
  .sd-event .sd-ev-sheet {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .sd-event .sd-ev-sheet-photo {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575.98px) {
  .sd-event .sd-ev-sheet-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

/* ------------------------------------------------------------------ Who it's for / What to expect / Why attend: plain editorial columns */

.sd-event .sd-ev-lists {
  background: #FFFFFF;
}

.sd-event .sd-ev-lists > .container > div {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.sd-event .sd-ev-lists .row {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}

/* A strong rule above each column instead of a card */
.sd-event .sd-ev-lists .row > [class*="col-"] > h2 {
  margin: 0;
  padding-top: 1rem;
  border-top: 2px solid var(--sd-text);
  font-size: 1.375rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
  color: var(--sd-text) !important;
}

/* The separator line under the titles is replaced by the rule above */
.sd-event .sd-ev-lists .mkd-separator {
  display: none;
}

.sd-event .sd-ev-lists ul {
  margin: 1rem 0 0;
  padding: 0;
}

.sd-event .sd-ev-lists li {
  margin: 0 !important;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sd-line);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--sd-body) !important;
}

.sd-event .sd-ev-lists li i {
  display: none;
}

/* Who it's for: the audiences set large, as a short list of words */
.sd-event .sd-ev-lists .row > [class*="col-"]:first-child li {
  padding: 0.5rem 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--sd-text) !important;
}

/* Green separator line under the other titles of the page (drawn with a bottom border) */
.sd-event .mkd-separator {
  border-color: var(--sd-green);
}

/* ------------------------------------------------------------------ Blocks appearing on scroll (events.js) */

.sd-event.sd-ev-animated .sd-ev-reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--sd-ev-i, 0) * 120ms);
}

.sd-event.sd-ev-animated .sd-ev-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ Numbers (dark panel) */

.sd-event .sd-ev-numbers {
  padding: 3.5rem 0 !important;
  background: var(--sd-ground) !important;
}

.sd-event .sd-ev-numbers > .container > div {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: var(--sd-navy);
  background-image:
    radial-gradient(ellipse 50% 90% at 50% 0%, rgba(80, 216, 120, 0.16) 0%, transparent 70%),
    var(--sd-dots);
  background-size: 100% 100%, 22px 22px;
  box-shadow: 0 32px 64px -28px rgba(17, 24, 39, 0.6);
}

/* The section title moves into the panel */
.sd-event .sd-ev-numbers > div:first-child {
  position: relative;
  z-index: 1;
  margin-bottom: -4.5rem;
  padding-top: 2.75rem !important;
}

.sd-event .sd-ev-numbers > div:first-child h2 {
  font-size: 0.8125rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-green) !important;
}

.sd-event .sd-ev-numbers .row {
  padding-top: 5rem !important;
  padding-bottom: 3rem !important;
}

.sd-event .sd-ev-numbers .display-3 {
  font-weight: 800 !important;
  letter-spacing: -1.5px;
  color: #FFFFFF;
}

.sd-event .sd-ev-numbers .row p {
  color: #C9D2E0 !important;
}

.sd-event .sd-ev-numbers .row i {
  color: var(--sd-green) !important;
}

/* ------------------------------------------------------------------ For Clubs / For Agents */

.sd-event .sd-ev-audience {
  background: #FFFFFF;
}

.sd-event .sd-ev-audience h3.display-6 {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px;
}

.sd-event .sd-ev-audience h2.fs-6 {
  font-size: 1.0625rem !important;
  line-height: 1.4 !important;
  color: var(--sd-green-text) !important;
}

.sd-event .sd-ev-audience p.lead {
  color: var(--sd-body) !important;
}

/* Logos in a soft card */
.sd-event .sd-ev-audience img.img-fluid {
  padding: 2rem;
  border: 1px solid var(--sd-line);
  border-radius: 1.5rem !important;
  background: var(--sd-ground);
  box-shadow: var(--sd-shadow-hover);
  transform: rotate(-2deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

/* The second block leans the other way; both straighten when pointed at */
.sd-event .sd-ev-audience > .container + .container img.img-fluid {
  transform: rotate(2deg);
}

.sd-event .sd-ev-audience img.img-fluid:hover {
  transform: rotate(0) scale(1.02);
}

/* ------------------------------------------------------------------ Testimonials (shared include) */

.sd-event .card:has(> figure) {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--sd-radius) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------ Sponsors */

.sd-event .sd-ev-sponsors {
  background: #FFFFFF !important;
}

.sd-event .sd-ev-sponsors h2 {
  font-size: 0.8125rem !important;
  letter-spacing: 0.12em;
  color: var(--sd-muted) !important;
}

.sd-event .sd-ev-sponsors .lp-partners-cards {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
  box-shadow: var(--sd-shadow);
}

/* ------------------------------------------------------------------ FAQs */

.sd-event .sd-ev-faq {
  padding-bottom: 4rem !important;
  background: var(--sd-ground) !important;
}

.sd-event .sd-ev-faq h2#faqs {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -1px;
}

.sd-event .sd-ev-faq .accordion-item {
  overflow: hidden;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius) !important;
  background: var(--sd-card);
  box-shadow: var(--sd-shadow) !important;
  transition: border-color .2s ease;
}

.sd-event .sd-ev-faq .accordion-item:has(.accordion-collapse.show) {
  border-color: var(--sd-green) !important;
}

.sd-event .sd-ev-faq .accordion-button {
  padding: 1.125rem 1.375rem;
  font-size: 1rem;
  color: var(--sd-text) !important;
  box-shadow: none !important;
}

.sd-event .sd-ev-faq .accordion-button:not(.collapsed) {
  color: var(--sd-green-text) !important;
}

.sd-event .sd-ev-faq .accordion-body {
  padding: 0 1.375rem 1.375rem;
  color: var(--sd-body) !important;
}

/* ------------------------------------------------------------------ Final call: dark panel on the light ground (the footer below starts on light) */

.sd-event .sd-ev-final {
  padding: 1rem 0 4.5rem !important;
  background: var(--sd-ground) !important;
}

.sd-event .sd-ev-final > .container {
  position: relative;
  overflow: hidden;
  padding: 4rem 1.5rem;
  border-radius: 1.5rem;
  background-color: var(--sd-navy);
  background-image:
    radial-gradient(ellipse 50% 90% at 50% 0%, rgba(80, 216, 120, 0.18) 0%, transparent 70%),
    var(--sd-dots);
  background-size: 100% 100%, 22px 22px;
  box-shadow: 0 32px 64px -28px rgba(17, 24, 39, 0.6);
}

.sd-event .sd-ev-final > .container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 216, 120, 0.55) 50%, transparent 100%);
}

.sd-event .sd-ev-final h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ Lisbon ticket modal */

.lisbon-ticket-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 1.25rem !important;
}

.lisbon-ticket-modal .modal-header {
  border-bottom: 1px solid var(--sd-line);
}

.lisbon-ticket-modal .modal-title {
  font-weight: 800 !important;
  color: var(--sd-text) !important;
}

.lisbon-ticket-modal .modal-body {
  padding: 2rem 1.5rem !important;
  background: var(--sd-ground);
}

.lisbon-ticket-modal .lisbon-ticket-pricing-grid {
  align-items: stretch;
}

.lisbon-ticket-modal .lisbon-ticket-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.75rem !important;
  border: 1px solid var(--sd-line);
  border-top: 4px solid var(--sd-navy);
  border-radius: var(--sd-radius);
  background: var(--sd-card);
  box-shadow: var(--sd-shadow);
}

/* Most popular ticket: dark card with a green line on top */
.lisbon-ticket-modal .lisbon-ticket-card-highlight {
  border: 0;
  border-top: 4px solid var(--sd-green);
  background: var(--sd-navy);
  background-image: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(80, 216, 120, 0.2) 0%, transparent 70%);
  color: #FFFFFF;
  transform: translateY(-0.5rem);
  box-shadow: 0 32px 64px -24px rgba(17, 24, 39, 0.6);
}

.lisbon-ticket-modal .lisbon-ticket-card-title {
  font-weight: 800;
  color: var(--sd-text);
}

.lisbon-ticket-modal .lisbon-ticket-card-highlight .lisbon-ticket-card-title,
.lisbon-ticket-modal .lisbon-ticket-card-highlight .lisbon-ticket-price {
  color: #FFFFFF;
}

.lisbon-ticket-modal .lisbon-ticket-card-highlight .lisbon-ticket-card-description,
.lisbon-ticket-modal .lisbon-ticket-card-highlight .lisbon-ticket-feature-list {
  color: #C9D2E0;
}

.lisbon-ticket-modal .lisbon-ticket-badge {
  align-self: flex-start;
  background: var(--sd-green);
  color: var(--sd-navy);
  font-weight: 700;
  border-radius: 999px;
}

.lisbon-ticket-modal .lisbon-ticket-price {
  margin: 1.5rem 0 1.25rem;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--sd-text);
}

.lisbon-ticket-modal .lisbon-ticket-feature-list i {
  color: var(--sd-green-text);
}

.lisbon-ticket-modal .lisbon-ticket-card-highlight .lisbon-ticket-feature-list i {
  color: var(--sd-green);
}

/* Ticket buttons: brand green; the sponsorship contact outlined */
.lisbon-ticket-modal .lisbon-ticket-card .btn {
  border: 1.5px solid var(--sd-green);
  border-radius: 0.5rem;
  background: var(--sd-green);
  color: var(--sd-navy);
  font-weight: 700;
}

.lisbon-ticket-modal .lisbon-ticket-card .btn:is(:hover, :focus-visible) {
  border-color: #6BE08E;
  background: #6BE08E;
  color: var(--sd-navy);
}

.lisbon-ticket-modal .lisbon-ticket-card .btn[href^="mailto:"] {
  border-color: var(--sd-navy);
  background: transparent;
  color: var(--sd-navy);
}

.lisbon-ticket-modal .lisbon-ticket-card .btn[href^="mailto:"]:is(:hover, :focus-visible) {
  background: var(--sd-navy);
  color: #FFFFFF;
}

@media (max-width: 991.98px) {
  .lisbon-ticket-modal .lisbon-ticket-card-highlight {
    transform: none;
  }
}

/* ------------------------------------------------------------------ Small screens */

@media (max-width: 767.98px) {
  .sd-event .sd-ev-hero > div {
    padding-top: 3rem !important;
    padding-bottom: 2.5rem;
  }

  .sd-event .sd-ev-numbers .display-3 {
    font-size: 2.75rem;
  }

  .sd-event .sd-ev-audience img.img-fluid {
    padding: 1.25rem;
  }
}

/* ------------------------------------------------------------------ Phones: tighter rhythm from the event details down */

@media (max-width: 767.98px) {
  /* Button pairs: same width, no side margins */
  .sd-event .d-grid > .btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .sd-event .sd-ev-lists > .container > div {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .sd-event .sd-ev-lists .row {
    --bs-gutter-y: 2rem;
  }

  .sd-event .sd-ev-lists .row > [class*="col-"]:first-child li {
    font-size: 1.25rem;
  }

  /* Numbers: two by two instead of four tall rows */
  .sd-event .sd-ev-numbers {
    padding: 2.5rem 0 !important;
  }

  .sd-event .sd-ev-numbers > div:first-child {
    margin-bottom: -3.5rem;
    padding-top: 2.25rem !important;
  }

  .sd-event .sd-ev-numbers .row {
    --bs-gutter-y: 1.75rem;
    padding-top: 4.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  .sd-event .sd-ev-numbers .row > [class*="col-"] {
    width: 50%;
  }

  .sd-event .sd-ev-numbers .display-3 {
    font-size: 2.25rem;
  }

  .sd-event .sd-ev-numbers .row p {
    margin-bottom: 0;
    font-size: 0.875rem !important;
    text-align: center;
  }

  /* For Clubs / For Agents: less empty space, logos straight and smaller */
  .sd-event .sd-ev-audience > .container > div {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .sd-event .sd-ev-audience .row {
    --bs-gutter-y: 1.75rem;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .sd-event .sd-ev-audience img.img-fluid,
  .sd-event .sd-ev-audience > .container + .container img.img-fluid {
    max-height: 13rem;
    margin: 0 auto;
    object-fit: contain;
    transform: none;
  }

  /* Testimonials read left to right on a phone */
  .sd-event .card:has(> figure) {
    text-align: left !important;
  }

  .sd-event .sd-ev-sponsors {
    padding-bottom: 1rem !important;
  }

  .sd-event .sd-ev-sponsors .container {
    padding-bottom: 1.5rem !important;
  }

  .sd-event .sd-ev-sponsors .mb-5 {
    margin-bottom: 1.5rem !important;
  }

  .sd-event .sd-ev-faq {
    padding-bottom: 2.5rem !important;
  }

  .sd-event .sd-ev-final {
    padding-bottom: 3rem !important;
  }

  .sd-event .sd-ev-final > .container {
    width: calc(100% - 1.5rem);
    padding: 2.75rem 1.25rem;
    border-radius: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-event .sd-ev-trust .lp-partners-cards img,
  .sd-event .sd-ev-audience img.img-fluid,
  .sd-event .sd-ev-sheet-photo img {
    transition: none;
  }

  .sd-event .sd-ev-trust .lp-partners-cards:hover img,
  .sd-event .sd-ev-audience img.img-fluid,
  .sd-event .sd-ev-audience img.img-fluid:hover {
    transform: none !important;
  }
}