/* ==========================================================================
   Adda 2026  —  /page/adda-2026/, the first Alumni Meet
   This file is the whole page. It deliberately does not load page-head.css:
   there is no photo banner here, because the poster is what anybody came to
   look at and a second header would only compete with it.
   ========================================================================== */

/* ============================================================= HERO ======= */
/* A COLOURED BAND, AND THE POSTER IN A CARD INSIDE IT. The band is what runs
   full width; the artwork is not, and that is the point:

   - the navigation goes position:fixed as soon as the page scrolls, so a
     poster flush with the top of the page loses its own masthead under the
     header the moment anybody moves. Inside a band with padding it never
     reaches that edge.
   - the file is 1600px wide. Stretched across a 1920px screen every letter
     on it softens. Here it is never asked to be wider than it was made.

   The green is the poster's own, so the card reads as mounted on it rather
   than dropped on a white page. */
.adda-hero {
  padding: 46px 0 52px;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(255, 255, 255, .10), transparent 70%),
    linear-gradient(160deg, #0f3d34 0%, #14463f 55%, #0c2f29 100%);
}

.adda-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 42px;
}

.adda-hero__poster {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  /* Deep enough to lift the card off a dark ground, which the site's own
     shadow tokens are not - they are made for white pages. */
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.adda-hero__poster img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- the panel beside it ------------------------------------------------- */
.adda-hero__panel { color: #fff; }

.adda-kicker {
  margin: 0;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.adda-title {
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* The Bengali line the poster carries under the name. Gold, and on its own
   line: Bengali and Latin at one size beside each other read as a collision
   rather than as a pair. */
.adda-tagline {
  margin: 10px 0 0;
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ---- the three facts the poster carries, as text ------------------------- */
.adda-facts {
  margin: 26px 0 0;
  display: grid;
  gap: 1px;                       /* the rules between rows, drawn by the gap */
  background: rgba(255, 255, 255, .16);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.adda-fact {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0 14px;
  align-items: baseline;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .06);
}
.adda-fact dt {
  margin: 0;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.adda-fact dd {
  margin: 0;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---- the one thing the poster cannot do --------------------------------- */
.adda-register {
  display: inline-block;
  margin: 26px 0 0;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #10332c;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.adda-register:hover {
  background: #fff;
  color: #10332c;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.adda-register:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .adda-register { transition: none; }
  .adda-register:hover { transform: none; }
}

/* Says where the button goes and who may use it - which matters before the
   click, not after. */
.adda-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: .83rem;
  line-height: 1.7;
}

/* =========================================================== INVITE ====== */
/* The Association's own words, under the band, at a reading measure. The
   poster can be as wide as the screen; a paragraph cannot. */
.adda-invite { background: var(--page); }
.adda-invite__body { max-width: 740px; margin: 0 auto; }
.adda-invite__body p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.85;
}
.adda-invite__back { margin-top: 8px; }
.adda-invite__back a {
  color: var(--accent-deep);
  font-size: .88rem;
  font-weight: 700;
}
.adda-invite__back a:hover { text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  /* The panel under the poster rather than beside it. Below this width the
     two columns leave the poster too small to read its own lettering. */
  .adda-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .adda-hero { padding: 32px 0 40px; }
}

@media (max-width: 575.98px) {
  .adda-hero { padding: 24px 0 32px; }
  .adda-tagline { font-size: 1.02rem; }
  /* Label over value: "Swami Vivekananda University Campus" in what is left
     beside a 148px label wraps to four lines on a phone. */
  .adda-fact { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 12px 14px; }
  .adda-register {
    /* Full width: this is the one thing the page asks anybody to do, and a
       pill floating mid-screen is a target to aim at. */
    display: block;
    padding: 14px 18px;
    text-align: center;
  }
  .adda-invite__body p { font-size: .93rem; }
}