/* ==========================================================================
   Offer pages — page styles
   Destination: app/assets/stylesheets/offers/pages.css

   MUST be linked AFTER the "offers" Tailwind build and "application" in
   app/views/layouts/offers.html.erb.
   ========================================================================== */

/* ===== Shared capture form (app/views/offers/_contact_form.html.erb) ===== */
.offer-turnstile { margin-bottom: 1rem; }

/* Named hook for the capture button. Its appearance (and width) comes from
   `.offer-contact-form input[type="submit"]` in the offers Tailwind entry, which
   is where the rest of the form's component styling lives; this stays as the
   class the template names so the button is greppable from the markup. */
.offer-form-submit { width: 100%; }

/* ===== Free trial (app/views/offers/envisia_assessment_free_trial.html.erb) ===== */
.offer-trial-lead-heading { line-height: 1.4em; }

/* ===== Thank-you pages =====
   app/views/offers/envisia_ebook_thank_you.html.erb
   app/views/offers/envisia_webinar_recording_thank_you.html.erb
   app/views/offers/envisia_webinar_thank_you.html.erb */

/* Narrower, left-aligned variant of .offer-container (which is 1200px wide) */
.offer-thank-you-panel {
  max-width: 600px;
  text-align: left;
  margin-top: 2rem;
}
.offer-thank-you-panel-heading { text-align: center; }

/* ===== Webinar recording (app/views/offers/envisia_webinar_recording.html.erb) ===== */
.offer-video-section { padding: 0 0 3rem; }

.offer-video-frame {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* 16:9 intrinsic-ratio box */
.offer-video-ratio {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.offer-video-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===== Blog offer embed (app/views/offers/embed*.html.erb) =====
   Rendered inside the blog modal iframe (public/offer_modal.js). The iframe
   sizes itself to this document via the offer-embed Stimulus controller, so
   this page owns no modal chrome — just the card. */
.offer-embed-body { background: #fff; }

.offer-embed {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2rem;
}

.offer-embed-media { flex: 0 0 140px; }
.offer-embed-cover {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
}

.offer-embed-content { flex: 1; min-width: 0; }

.offer-embed-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--offer-primary);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.offer-embed-sub,
.offer-embed-cta {
  font-size: 0.9375rem;
  color: var(--offer-gray-600);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.offer-embed-body-text { line-height: 1.6; margin-bottom: 1rem; }

.offer-embed--thanks { padding: 2.5rem 2rem; }

@media (max-width: 540px) {
  .offer-embed { flex-direction: column; padding: 1.25rem; }
  .offer-embed-media { flex-basis: auto; max-width: 120px; }
}

/* Sidebar variant: the same card rendered into the blog post's sticky sidebar
   column (~350px) instead of a 680px modal. Stacked at any width, quieter
   type, and no shadow — it sits IN the page rather than over it. */
.offer-embed--sidebar {
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 8px;
  border-left: 4px solid var(--offer-red);
  background: var(--offer-gray-50);
}

.offer-embed--sidebar .offer-embed-media {
  flex-basis: auto;
  max-width: 110px;
}

.offer-embed--sidebar .offer-embed-title {
  font-size: 1.0625rem;
  margin-bottom: 0.4rem;
}

.offer-embed--sidebar .offer-embed-sub,
.offer-embed--sidebar .offer-embed-cta {
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

/* The shared capture form is built for a wide landing page: uppercase labels,
   1.125rem gaps and 0.875rem input padding put each field near 90px, which in
   a ~350px column made the card 650px+ tall — taller than the article text
   beside it. Same fields, compact spacing. */
.offer-embed--sidebar .offer-contact-form .input {
  width: 100%;
  float: none;
  padding: 0;
  margin-bottom: 0.625rem;
}

.offer-embed--sidebar .offer-contact-form label,
.offer-embed--sidebar .offer-contact-form .form-label {
  font-size: 0.6875rem;
  margin-bottom: 0.25rem;
  text-transform: none;
  letter-spacing: 0;
}

.offer-embed--sidebar .offer-contact-form input[type="text"],
.offer-embed--sidebar .offer-contact-form input[type="email"],
.offer-embed--sidebar .offer-contact-form select {
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  border-width: 1px;
}

.offer-embed--sidebar .offer-turnstile {
  margin-bottom: 0.625rem;
  /* The Cloudflare widget has a fixed 300px intrinsic width; in a 350px column
     it is the widest thing on the card, so scale it to fit rather than let it
     set the card's width. */
  transform: scale(0.85);
  transform-origin: left top;
  height: 62px;
}

.offer-embed--sidebar .offer-form-submit {
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
}