/* Partners page — base fb-* classes + partner-specific styles + animations */

/* ===== CSS tokens (mirrors football.css) ===== */
:root{
  --ink:    #0e2431;
  --ink-2:  #3a5060;
  --muted:  #6b7e8a;
  --line:   #e7edf1;
  --paper:  #fff;
  --brand:  #12b2e8;
  --brand-2:#0ed3a5;
  --shadow: 0 14px 30px rgba(0,0,0,.12);
  --radius: 14px;
}

/* ===== Hero ===== */
.fb-hero {
  position: relative;
  min-height: 46vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fb-hero__bg {
  position: absolute; inset: 0;
  background-image: var(--src);
  background-size: cover;
  background-position: center;
  filter: brightness(.72);
}
.fb-hero__overlay {
  position: relative; z-index: 2;
  text-align: center;
  color: #fff;
  padding: 20px 16px;
  text-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.fb-hero__overlay h1 {
  margin: 0 0 8px;
  font: 900 clamp(1.6rem, 3.6vw, 2.6rem)/1.1 system-ui, Segoe UI, Inter, Arial;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.fb-hero__overlay p { margin: 0; opacity: .92; font-size: clamp(.9rem, 1.3vw, 1rem); }

/* Animated colour wash on hero */
.fb-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(125deg,
    rgba(17,157,184,.18) 0%,
    rgba(8,28,52,.35)   50%,
    rgba(17,157,184,.12) 100%);
  background-size: 200% 200%;
  animation: hero-wash 9s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
@keyframes hero-wash {
  0%   { background-position: 0% 0%;     opacity: .85; }
  100% { background-position: 100% 100%; opacity: 1;   }
}

/* ===== Section base ===== */
.fb-events {
  padding: 46px 0 56px;
  position: relative;
  overflow: hidden;
}
.fb-events .wrap {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 34px);
  position: relative; z-index: 1;
}

/* Floating orb background */
.fb-events::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 520px 380px at 10% 60%,  rgba(17,157,184,.09) 0%, transparent 65%),
    radial-gradient(ellipse 440px 340px at 88% 25%,  rgba(8,28,52,.07)   0%, transparent 65%),
    radial-gradient(ellipse 360px 280px at 55% 85%,  rgba(17,157,184,.07) 0%, transparent 60%);
  animation: orb-drift 18s ease-in-out infinite alternate;
}
@keyframes orb-drift {
  0%   { transform: translateX(0)     translateY(0);   }
  50%  { transform: translateX(24px)  translateY(-14px); }
  100% { transform: translateX(-18px) translateY(18px); }
}

/* Section heading */
.fb-head { margin-bottom: 18px; }
.fb-head h2 {
  margin: 0 0 4px;
  font: 900 1.4rem/1 system-ui, Segoe UI, Inter, Arial;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #0a3d5c, #119DB8, #0a7a9b, #0a3d5c);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-shimmer 7s linear infinite;
}
.fb-head p { margin: 0 0 16px; color: var(--muted); }
@keyframes text-shimmer {
  0%   { background-position: 0%   50%; }
  100% { background-position: 300% 50%; }
}

/* ===== Card grid ===== */
.fb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

/* ===== Base card ===== */
.fb-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fb-card__media {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.fb-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.fb-card:hover .fb-card__media img { transform: scale(1.06); }

.fb-card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.fb-card__icon { color: #119DB8; font-size: 14px; line-height: 1; }
.fb-card__body h3 {
  margin: 2px 0 4px;
  font: 900 1rem/1.2 system-ui, Segoe UI, Inter, Arial;
  text-transform: uppercase;
  letter-spacing: .2px;
}
.fb-card__body p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }

/* ===== Partner card overrides ===== */
.partners-grid { gap: 22px; }

.partners-grid .fb-card__media { height: auto; }
.partners-grid .fb-card__media img { object-fit: unset; width: 100%; height: auto; padding: 0; }

.partners-grid .fb-card__body { padding: 16px 16px 18px; }
.partners-grid .fb-card__body p { margin-bottom: 4px; }
.partners-grid .fb-card__body .btn { width: 100%; justify-content: center; margin-top: auto; }

/* Staggered entrance + animated border */
.partner-card {
  transform: translateY(10px);
  opacity: 0;
  position: relative;
  transition: transform .55s ease, opacity .55s ease, box-shadow .28s ease, translate .28s ease;
  will-change: transform, opacity;
}
.partner-card.in { transform: none; opacity: 1; }

.partner-card:nth-child(1) { transition-delay: 0s;    }
.partner-card:nth-child(2) { transition-delay: .12s;  }
.partner-card:nth-child(3) { transition-delay: .24s;  }

/* Gradient shimmer border on hover */
.partner-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  padding: 1.5px;
  background: linear-gradient(90deg, #119DB8, #0a3d5c, #119DB8);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  animation: border-pan 3.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.partner-card:hover::before  { opacity: 1; }
.partner-card:hover {
  box-shadow: 0 20px 44px rgba(0,0,0,.13), 0 0 24px rgba(17,157,184,.12);
  translate: 0 -3px;
}
@keyframes border-pan { to { background-position: 200% 0; } }

/* ===== Healthcare Barcelona media ===== */
.hc-media {
  background: linear-gradient(135deg, #082c45 0%, #119DB8 55%, #0e8fa8 100%) !important;
  background-size: 200% 200% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: hc-bg-shift 7s ease-in-out infinite alternate;
}
/* prevent the parent img zoom rule from doing anything on HC card */
.partner-card[data-partner="healthcare"]:hover .fb-card__media img { transform: none; }

@keyframes hc-bg-shift {
  0%   { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}
.hc-cross {
  width: 72px; height: 72px;
  filter: drop-shadow(0 3px 14px rgba(255,255,255,.22));
  animation: hc-pulse 3s ease-in-out infinite;
}
@keyframes hc-pulse {
  0%,100% { filter: drop-shadow(0 3px 14px rgba(255,255,255,.22)); transform: scale(1);    }
  50%     { filter: drop-shadow(0 4px 22px rgba(255,255,255,.42)); transform: scale(1.07); }
}

/* ===== Healthcare modal cover ===== */
.hc-modal-cover {
  background: linear-gradient(135deg, #082c45 0%, #119DB8 55%, #0e8fa8 100%);
  background-size: 200% 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 12px;
  animation: hc-bg-shift 7s ease-in-out infinite alternate;
}
.hc-modal-cover .hc-cross { width: 64px; height: 64px; }
.hc-tagline { font-size: .92rem; color: #119DB8 !important; font-weight: 700; margin-bottom: 6px !important; }
.hc-code-box {
  background: linear-gradient(135deg, rgba(17,157,184,.10), rgba(14,42,61,.08));
  border: 1px solid rgba(17,157,184,.35);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
}
.hc-code-box p  { margin: 0 !important; font-weight: 900; color: #0a3d5c !important; font-size: .97rem; }
.hc-code-box strong { color: #119DB8; }

/* ===== Uniball ID CTA ===== */
.uniball-id { padding: 46px 0 62px; position: relative; overflow: hidden; }
.uniball-id::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 500px 350px at 80% 50%, rgba(17,157,184,.08) 0%, transparent 65%),
    radial-gradient(ellipse 400px 300px at 20% 40%, rgba(8,28,52,.06)    0%, transparent 65%);
  animation: orb-drift 20s ease-in-out infinite alternate;
}
.uniball-id .wrap { position: relative; z-index: 1; }
.id-wrap { display: grid; place-items: center; }
.id-card {
  width: min(100%, 820px);
  border: 1px solid rgba(17,157,184,.25);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 30px);
  text-align: center;
  background: linear-gradient(135deg, #f8fdff, #eef8fb);
  position: relative; overflow: hidden;
}
.id-card::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(90deg, rgba(17,157,184,.5), rgba(8,28,52,.3), rgba(17,157,184,.5));
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-pan 5s linear infinite;
  pointer-events: none;
}
.id-card h2 { margin: 0 0 8px; font: 900 1.45rem/1.1 system-ui, Segoe UI, Inter, Arial; text-transform: uppercase; letter-spacing: .35px; position: relative; }
.id-card p  { margin: 0 0 18px; color: var(--ink-2); font-weight: 650; position: relative; }
.id-btn { margin: 6px 8px 0; position: relative; }

@media (max-width: 520px) {
  .id-card .btn { width: 100%; margin: 8px 0 0; }
}

/* ===== Stall Applications card ===== */
.stall-apps { background: #f7fbff; }
.form-card {
  width: min(100%, 1000px);
  margin: 14px auto 0;
  border-radius: var(--radius);
  background: var(--paper);
  position: relative; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  border: 1px solid var(--line);
  transform: translateY(10px); opacity: 0;
  transition: transform .6s ease, opacity .6s ease, box-shadow .25s ease;
}
.form-card.in  { transform: translateY(0); opacity: 1; }
.form-card:hover { box-shadow: 0 14px 38px rgba(0,0,0,.12); }

.form-card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(90deg, rgba(17,157,184,.28), rgba(8,28,52,.28), rgba(17,157,184,.28));
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-pan 6s linear infinite;
}
.form-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f8fcff, #fff);
}
.form-card__head .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #119DB8;
  animation: ping 2.2s ease-out infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0    rgba(17,157,184,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(17,157,184,0);   }
  100% { box-shadow: 0 0 0 0    rgba(17,157,184,0);   }
}
.form-card__head h3 { margin: 0; font: 900 1.05rem/1.15 system-ui; text-transform: uppercase; letter-spacing: .25px; }
.form-card__head p  { margin: 2px 0 0; color: var(--muted); }
.form-card__body    { padding: 12px 12px 0; }
.form-card__body iframe { width: 100% !important; border: 0; }
.form-card__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 12px 16px; border-top: 1px solid var(--line); background: #fff;
}

/* ===== Partner modals ===== */
.p-modal {
  border: none; padding: 0;
  width: min(94vw, 720px);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  overflow: hidden;
}
.p-modal::backdrop { background: rgba(0,0,0,.52); }
.p-body  { padding: 16px 18px 22px; }
.p-cover {
  width: 100%; height: 230px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
  display: block;
}
.p-close {
  position: absolute; top: 10px; right: 12px;
  border: none; background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px); color: #173a50;
  font-size: 28px; line-height: 1; cursor: pointer;
  padding: 4px 8px; border-radius: 10px;
}
.p-close:hover { background: rgba(255,255,255,.92); }
.p-body h3 { margin: 2px 0 8px; font: 900 1.1rem/1.1 system-ui; text-transform: uppercase; letter-spacing: .25px; }
.p-body p  { margin: 0 0 10px; color: var(--ink-2); }
.p-points  { margin: 10px 0 12px; padding-left: 18px; color: var(--ink-2); }
.p-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.p-actions .btn { flex: 1 1 180px; justify-content: center; }

/* Quiz blocks */
.quiz .q       { display: block; margin: 8px 0 10px; font-weight: 800; }
.quiz .answers { display: grid; gap: 8px; margin-bottom: 12px; }
.quiz .answers label { display: flex; gap: 8px; align-items: center; }
.quiz .result  { margin: 8px 0 0; font-weight: 800; }
.quiz .result.ok  { color: #0d8f6c; }
.quiz .result.err { color: #b02a2a; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center;
  text-decoration: none; border: none; cursor: pointer;
  padding: .55rem .9rem; border-radius: 999px;
  font-weight: 800; color: #052734;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 18px rgba(0,0,0,.1);
  transition: filter .2s;
}
.btn:hover { filter: brightness(1.06); }
.btn-outline {
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line); box-shadow: none;
}
.btn-outline:hover { background: #f7fbff; }

/* ===== Responsive ===== */
@media (max-width: 780px) {
  .fb-grid { grid-template-columns: 1fr; }
}

/* ===== Motion safety ===== */
@media (prefers-reduced-motion: reduce) {
  .partner-card, .partner-card:hover,
  .form-card, .hc-media, .hc-cross,
  .fb-events::before, .uniball-id::before,
  .fb-head h2, .id-card::before, .fb-hero::after {
    transition: none; transform: none !important;
    translate: none !important; animation: none !important;
    background-position: 0 0 !important;
    -webkit-text-fill-color: unset;
  }
}