/* ABT Internacional course certificate — landscape single page.
   Loaded explicitly from index.html when certificate routes are visited.

   Color tokens follow the ABT brand:
     --abt-ink         #0a3a4a   (deep teal, body type)
     --abt-primary     #1aa8c4   (logo cyan, accents)
     --abt-gold        #c9a449   (frame + signature accents)
     --abt-paper       #fbf8f1   (off-white background)
*/

.cert-page {
  --abt-ink:     #0a3a4a;
  --abt-primary: #1aa8c4;
  --abt-primary-dark: #157a90;
  --abt-gold:    #c9a449;
  --abt-paper:   #fbf8f1;
  
  /* Simplified decoration approach */

  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 28%, #ffffff 0%, var(--abt-paper) 52%, #e7dcc2 100%);
  color: var(--abt-ink);
  font-family: 'Source Serif 4', 'Playfair Display', Georgia, serif;
  display: grid;
  grid-template-rows: auto 1fr auto;
  break-after: page;
  break-inside: avoid;
}

/* Landscape Letter (default): 11in × 8.5in */
.cert-page--landscape {
  width:  11in;
  height: 8.5in;
}

/* Portrait Letter: 8.5in × 11in */
.cert-page--portrait {
  width:  8.5in;
  height: 11in;
}

/* When sitting inside greb-docs' viewer (which auto-scales pages to viewport),
   the registry also adds .page--landscape; nothing extra needed here. */

/* ── Elegant single frame with subtle inner shadow ──────────────── */
.cert-page::before {
  content: "";
  position: absolute;
  inset: 0.4in;
  border: 1px solid var(--abt-gold);
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 0 0 1px rgba(201, 164, 73, 0.2);
}

/* ── Header: brand logo only (decoración vive en el page) ──────── */
.cert-header {
  position: relative;
  z-index: 3;
  padding: 0.85in 0.9in 0 0.9in;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 1.1in;
}

.cert-brand {
  position: relative;
  z-index: 4;
}

/* Elegant corner decorative elements - positioned at top and bottom corners */
.cert-corner-art {
  position: absolute;
  width: 2.2in;
  height: 2.2in;
  pointer-events: none;
  z-index: -1; /* Behind the gold frame lines */
  opacity: 0.4;
}

.cert-corner-art--left {
  top: -0.3in;
  left: -0.3in;
}

.cert-corner-art--right {
  bottom: -0.3in;
  right: -0.3in;
}

/* More prominent geometric patterns using CSS gradients */
.cert-corner-art--variant-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 40% at 80% 80%, var(--abt-primary) 0%, transparent 70%),
    conic-gradient(from 45deg at 75% 75%, var(--abt-gold) 0%, transparent 30%, var(--abt-primary) 60%, transparent 100%);
  border-radius: 0 0 100% 0;
}

.cert-corner-art--variant-2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 40% at 20% 20%, var(--abt-primary) 0%, transparent 70%),
    conic-gradient(from 225deg at 25% 25%, var(--abt-gold) 0%, transparent 30%, var(--abt-primary) 60%, transparent 100%);
  border-radius: 100% 0 0 0;
}

.cert-brand-logo {
  height: 0.85in;
  width: auto;
  display: block;
}

/* ── Body: title block, alumno name, closing, meta ──────────────── */
.cert-body {
  position: relative;
  z-index: 2;
  padding: 0.1in 1.1in 0 1.1in;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2in;
}

.cert-title-block {
  margin-top: 0.1in;
}
.cert-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14pt;
  font-style: italic;
  color: var(--abt-ink);
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.cert-eyebrow-en {
  opacity: 0.7;
}

.cert-alumno {
  font-family: 'Playfair Display', 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 52pt;
  line-height: 1.05;
  margin: 0;
  color: var(--abt-primary-dark);
  letter-spacing: -0.01em;
  /* Underscore via gold underline echoing the gold frame */
  padding-bottom: 0.1in;
  border-bottom: 1.5px solid var(--abt-gold);
  /* Stay clear of the two corner ornaments (~1.5in each, top zone only). */
  max-width: calc(100% - 2.2in);
}

.cert-closing {
  margin-top: 0.05in;
}
.cert-closing-es,
.cert-closing-en {
  margin: 0;
  font-size: 13pt;
  line-height: 1.4;
}
.cert-closing-en {
  font-style: italic;
  opacity: 0.65;
  font-size: 11pt;
  margin-top: 0.04in;
}
.cert-curso-title {
  font-family: 'Playfair Display', 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 22pt;
  line-height: 1.2;
  margin: 0.08in 0 0 0;
  color: var(--abt-ink);
}
.cert-curso-title--en {
  font-weight: 400;
  font-style: italic;
  font-size: 14pt;
  opacity: 0.7;
  margin-top: 0.04in;
}

/* ── Meta row: fecha · duración · modalidad ─────────────────────── */
.cert-meta {
  display: flex;
  gap: 0.6in;
  margin-top: 0.15in;
  padding-top: 0.15in;
  border-top: 0.5px dashed rgba(10, 58, 74, 0.25);
  min-width: 7in;
  justify-content: center;
}
.cert-meta-item {
  text-align: center;
}
.cert-meta-label {
  font-family: 'Outfit', 'Source Serif 4', sans-serif;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--abt-primary-dark);
  margin-bottom: 0.04in;
}
.cert-meta-value {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 11pt;
  font-weight: 600;
  color: var(--abt-ink);
}

/* ── Footer: signature · regional mark · QR ─────────────────────── */
.cert-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  padding: 0 0.9in 0.55in 0.9in;
  gap: 0.3in;
}

.cert-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 1.4in;
  justify-content: flex-end;
}
/* When :firma is provided the asset already includes the line +
   printed name. We just show the image and the role caption. */
.cert-signature--with-asset .cert-signature-img {
  max-width: 2.4in;
  max-height: 1.2in;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.cert-signature-placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 0.9in;
  margin-bottom: -0.05in;
}
.cert-signature-script {
  font-family: 'Playfair Display', 'Source Serif 4', cursive;
  font-style: italic;
  font-weight: 400;
  font-size: 28pt;
  color: var(--abt-primary-dark);
  opacity: 0.55;
  /* Faux-handwritten slant */
  transform: rotate(-3deg);
  letter-spacing: -0.02em;
}
.cert-signature-line {
  width: 2.4in;
  height: 1px;
  background: var(--abt-ink);
  opacity: 0.5;
  margin-bottom: 0.06in;
}
.cert-signature-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 11pt;
  font-weight: 700;
  color: var(--abt-ink);
  text-align: center;
}
.cert-signature-role {
  font-family: 'Outfit', sans-serif;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--abt-primary-dark);
  margin-top: 0.02in;
  text-align: center;
}

.cert-footer-mark {
  text-align: center;
  align-self: end;
  font-family: 'Outfit', 'Source Serif 4', sans-serif;
  /* Cream backing so the regional band stays crisp over the (now more
     visible) paper gradient + corner ornaments. */
  background:
    linear-gradient(rgba(251, 248, 241, 0.92), rgba(251, 248, 241, 0.92));
  border-radius: 3px;
  padding: 0.07in 0.14in 0.06in 0.14in;
  border-top: 0.75px solid var(--abt-gold);
}
.cert-footer-mark-label {
  font-size: 6.5pt;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--abt-gold);
  margin-bottom: 0.03in;
}
.cert-footer-mark-paises {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--abt-ink);
  font-weight: 600;
}

.cert-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06in;
}
.cert-qr {
  box-sizing: border-box;
  width: 1in;
  height: 1in;
  display: block;
  background: white;
  /* white quiet-zone around the modules so the code never looks clipped */
  padding: 7px;
  border: 0.5px solid rgba(10, 58, 74, 0.2);
}
.cert-qr-meta {
  text-align: center;
}
.cert-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9pt;
  font-weight: 600;
  color: var(--abt-ink);
  letter-spacing: 0.04em;
}
.cert-verify {
  font-family: 'Outfit', sans-serif;
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--abt-primary-dark);
  margin-top: 0.02in;
}

/* ── Portrait variant overrides ─────────────────────────────────── */
.cert-page--portrait .cert-corner-art {
  width: 2in;
  height: 2in;
}
.cert-page--portrait .cert-corner-art--left {
  top: -0.2in;
  left: -0.2in;
}
.cert-page--portrait .cert-corner-art--right {
  bottom: -0.2in;
  right: -0.2in;
}
.cert-page--portrait .cert-header {
  padding: 0.65in 0.7in 0 0.7in;
}
.cert-page--portrait .cert-body {
  padding: 0.1in 0.7in 0 0.7in;
}
.cert-page--portrait .cert-alumno {
  font-size: 44pt;
  min-width: 5in;
}
.cert-page--portrait .cert-curso-title {
  font-size: 18pt;
}
.cert-page--portrait .cert-meta {
  min-width: 0;
  gap: 0.4in;
}
.cert-page--portrait .cert-footer {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.2in;
  padding: 0 0.7in 0.55in 0.7in;
}
.cert-page--portrait .cert-footer-mark {
  order: 3;
}
.cert-page--portrait .cert-signature {
  order: 1;
  min-height: auto;
}
.cert-page--portrait .cert-qr-block {
  order: 2;
}

/* Remove distracting animations for professional appearance */

/* ── Clean, professional design without excessive decoration utilities ── */

/* ── Print: lock page size based on orientation ────────────────── */
@media print {
  @page {
    margin: 0;
  }
  /* The landscape certificate gets its 11×8.5 sheet from its inline
     `page: landscape-page` (certificate.cljs) + `@page landscape-page`.
     A global `@page :first { size: 11in 8.5in }` used to live here, but it
     forced the FIRST page of EVERY exported document to landscape — it broke
     other courses' covers in the PDF export — so it was removed. */
  .cert-page {
    margin: 0;
    box-shadow: none;
  }
  .cert-page--portrait {
    page: portrait-page;
  }
  @page portrait-page {
    size: 8.5in 11in;
    margin: 0;
  }
}