/* =========================================================
   Resources page (pages/resources.md, loaded on that page only): the ebook
   cards, the Download pop-up (assets/js/ebook-popup.js) and the
   ActiveCampaign forms inside it.
   ========================================================= */

/* Ebook cards ("cover stage"), on the dark band: tall white cards, the cover
   big on a soft paper glow, and a full-width Download button. */
.ebook-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-card);color:var(--light);
}
.ebook-card-stage{
  aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;padding:28px;
  background:radial-gradient(circle at 50% 45%,#fff 0,var(--paper) 72%);
}
/* The picture is laid over the square, so a tall cover can never stretch the card. */
.ebook-card-stage img{position:absolute;top:28px;left:28px;width:calc(100% - 56px);height:calc(100% - 56px);object-fit:contain;filter:drop-shadow(0 18px 24px rgba(10,10,10,0.2));transition:transform 0.35s var(--ease)}
.ebook-card:hover .ebook-card-stage img{transform:translateY(-6px)}
.ebook-card-text{display:flex;flex-direction:column;flex:1;padding:24px 26px 28px}
.ebook-card-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange-ink);margin:0 0 10px}
.ebook-card-title{font-size:20px;font-weight:700;letter-spacing:-0.01em;line-height:1.25;color:var(--light);margin:0 0 10px}
.ebook-nowrap{white-space:nowrap}
/* The summary stops at four lines (with "...") on every screen, so a long one
   cannot stretch the card. The CMS suggests about 110 characters, which fits 4 lines on laptops and most phones. */
.ebook-card-summary{
  font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 22px;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.ebook-card .btn-primary{margin-top:auto;justify-content:center;border:0}
/* Phones: compact cards, the cover small on the left and the words beside it,
   so a page is not several screens long. The summary keeps its four lines. */
@media (max-width:640px){
  .ebook-grid{gap:14px}
  .ebook-card{display:grid;grid-template-columns:118px 1fr}
  .ebook-card-stage{aspect-ratio:auto;padding:12px}
  .ebook-card-stage img{top:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
  .ebook-card-text{padding:16px 16px 16px 14px}
  .ebook-card-eyebrow{font-size:10px;margin-bottom:6px}
  .ebook-card-title{font-size:16px;margin-bottom:6px}
  .ebook-card-summary{font-size:13px;line-height:1.5;margin-bottom:12px}
  .ebook-card .btn-primary{align-self:flex-start;padding:10px 18px;font-size:14px;gap:8px}
}
/* Search (assets/js/ebook-search.js): cards that do not match are hidden, and
   the result line above them reads light on the dark band */
.ebook-card[hidden]{display:none}
.band-dark .post-search-status{color:rgba(255,255,255,0.75)}
.band-dark .post-search-reset{color:var(--orange)}
.band-dark .post-search-reset:hover{color:#fff}
.post-search-status:not(:empty) + .ebook-grid{margin-top:24px}
/* Pages (the Articles page's pager from site.css, .post-pager), on the dark
   band: the current page in orange, the words light. Going to a page scrolls
   back to the cards, clear of the fixed header. */
.ebook-grid{scroll-margin-top:120px}
.ebook-card:focus{outline:none}
.band-dark .post-pager-num[aria-current="page"]{background:var(--orange);border-color:var(--orange);color:#fff}
.band-dark .post-pager-gap,.band-dark .post-pager-where{color:rgba(255,255,255,0.75)}
.band-dark .post-pager-step:disabled{opacity:0.35}
/* The space above the cards matches the space under the search box: the
   hero's bottom padding (.hero-split in site.css: 88px, 64px up to 1024px
   wide, 56px up to 640px), less the band's 1px top border. */
.ebooks-band .section-inner{padding-top:87px}
.ebooks-band .ebook-grid{margin-top:0}
@media(max-width:1024px){.ebooks-band .section-inner{padding-top:63px}}
@media(max-width:640px){.ebooks-band .section-inner{padding-top:55px}}

/* The page behind does not scroll while the pop-up is open */
html.has-ebook-modal{overflow:hidden}

.ebook-modal{
  width:min(560px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);
  margin:auto;padding:0;border:0;border-radius:var(--radius-card);
  background:#fff;color:var(--light);box-shadow:0 30px 80px rgba(10,10,10,0.35);
  overflow:hidden;
}
.ebook-modal[open]{display:flex;flex-direction:column}
.ebook-modal::backdrop{background:rgba(10,10,10,0.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* Only the box scrolls, so a tall form scrolls inside the pop-up and the
   close button (placed on the dialog, outside the box) stays in view. */
.ebook-modal-box{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:40px 36px 36px}
.ebook-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:50%;background:#fff;color:var(--light);
  font:400 24px/1 'Montserrat',sans-serif;cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.ebook-modal-close:hover{border-color:var(--orange);color:var(--orange)}
.ebook-modal-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ebook-modal-eyebrow{color:var(--orange-ink);margin:0 48px 10px 0}
.ebook-modal-title{font-size:26px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;color:var(--light);margin:0 48px 24px 0}
.ebook-form-status{font-size:15px;color:var(--muted);margin:0}
/* The loading line goes once the form is in */
.ebook-form-target:not(:empty) + .ebook-form-status{display:none}
.ebook-form[hidden]{display:none}

/* ---------------------------------------------------------
   ActiveCampaign forms, in the pop-up only. Written once for every ebook:
   ActiveCampaign gives each form its own id (#_form_6AF2..._), so these rules
   start from the pop-up's id and its form area to outrank its styles, and use !important
   because some of its rules do. Matches the site's contact form
   (.form-label, .form-input, .btn-primary in site.css).
   --------------------------------------------------------- */
#ebook-modal .ebook-modal-forms ._form{
  width:auto !important;max-width:none !important;margin:0 !important;padding:0 !important;
  background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  color:var(--light) !important;font-family:'Montserrat',sans-serif !important;font-size:15px !important;line-height:1.6 !important;
}
#ebook-modal .ebook-modal-forms ._form *{font-family:'Montserrat',sans-serif !important}
#ebook-modal .ebook-modal-forms ._form ._form-content{display:flex !important;flex-direction:column;gap:16px}
#ebook-modal .ebook-modal-forms ._form ._form_element{margin:0 !important;padding:0 !important;width:auto !important;float:none !important}
#ebook-modal .ebook-modal-forms ._form ._form-fieldset{margin:0 !important;padding:0 !important;border:0 !important}

/* Labels: the site's small capitals */
#ebook-modal .ebook-modal-forms ._form ._form-label,
#ebook-modal .ebook-modal-forms ._form ._form-label *{
  display:block;margin:0 0 6px !important;padding:0 !important;
  font-size:12px !important;font-weight:700 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;
  color:var(--muted) !important;line-height:1.4 !important;
}
#ebook-modal .ebook-modal-forms ._form ._form-label .field-required,
#ebook-modal .ebook-modal-forms ._form .field-required{display:inline;color:var(--orange-ink) !important;margin:0 0 0 2px !important}

/* Inputs: the site's input fields */
#ebook-modal .ebook-modal-forms ._form input[type="text"],
#ebook-modal .ebook-modal-forms ._form input[type="email"],
#ebook-modal .ebook-modal-forms ._form input[type="tel"],
#ebook-modal .ebook-modal-forms ._form input[type="date"],
#ebook-modal .ebook-modal-forms ._form input[type="number"],
#ebook-modal .ebook-modal-forms ._form select,
#ebook-modal .ebook-modal-forms ._form textarea{
  display:block;width:100% !important;max-width:none !important;height:auto !important;min-height:0 !important;margin:0 !important;
  padding-top:14px !important;padding-right:18px !important;padding-bottom:14px !important;
  background:#fbfaf8 !important;border:1px solid var(--border) !important;border-radius:10px !important;box-shadow:none !important;
  font-size:15px !important;font-weight:500 !important;line-height:1.4 !important;color:var(--light) !important;outline:none !important;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast);
}
#ebook-modal .ebook-modal-forms ._form input:not(.iti__tel-input),#ebook-modal .ebook-modal-forms ._form select,#ebook-modal .ebook-modal-forms ._form textarea{padding-left:18px !important}
#ebook-modal .ebook-modal-forms ._form input::placeholder,#ebook-modal .ebook-modal-forms ._form textarea::placeholder{color:#8f8b83 !important;opacity:1}
#ebook-modal .ebook-modal-forms ._form input[type="text"]:focus,
#ebook-modal .ebook-modal-forms ._form input[type="email"]:focus,
#ebook-modal .ebook-modal-forms ._form input[type="tel"]:focus,
#ebook-modal .ebook-modal-forms ._form input[type="date"]:focus,
#ebook-modal .ebook-modal-forms ._form input[type="number"]:focus,
#ebook-modal .ebook-modal-forms ._form select:focus,
#ebook-modal .ebook-modal-forms ._form textarea:focus{
  background:#fff !important;border-color:rgba(233,92,37,0.6) !important;box-shadow:0 0 0 3px rgba(233,92,37,0.12) !important;
}

/* The phone box (intl-tel-input). It lays its flag and dial code over the
   field and pads the field by a width it measures once while loading, which
   comes out differently depending on what has loaded by then. So here the
   flag and the number sit side by side instead, in one box drawn like the
   other fields, and no measured padding is needed. */
#ebook-modal .ebook-modal-forms ._form .iti{
  display:flex !important;align-items:stretch;width:100% !important;
  background:#fbfaf8;border:1px solid var(--border);border-radius:10px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast);
}
#ebook-modal .ebook-modal-forms ._form .iti:focus-within{background:#fff;border-color:rgba(233,92,37,0.6);box-shadow:0 0 0 3px rgba(233,92,37,0.12)}
#ebook-modal .ebook-modal-forms ._form .iti .iti__country-container{position:static !important;display:flex;padding:0 !important}
#ebook-modal .ebook-modal-forms ._form .iti .iti__selected-country{border-radius:10px 0 0 10px;padding:0 4px 0 16px !important;background:none !important}
#ebook-modal .ebook-modal-forms ._form .iti input.iti__tel-input{
  flex:1;min-width:0;padding-left:8px !important;border:0 !important;background:transparent !important;box-shadow:none !important;
}
#ebook-modal .ebook-modal-forms ._form .iti__selected-dial-code{color:var(--light) !important;font-size:15px !important}
/* Its country list opens under the whole field, as wide as the field */
#ebook-modal .ebook-modal-forms ._form .iti .iti__dropdown-content{top:100% !important;left:-1px !important;right:-1px !important;width:auto !important;margin-top:4px !important;overflow:hidden}
#ebook-modal .ebook-modal-forms ._form .iti .iti__country-list{width:100% !important;overflow-x:hidden !important}
#ebook-modal .ebook-modal-forms ._form .iti__dropdown-content{border:1px solid var(--border) !important;border-radius:10px !important;box-shadow:0 12px 30px rgba(10,10,10,0.14) !important;color:var(--light) !important}
#ebook-modal .ebook-modal-forms ._form .iti__country{color:var(--light) !important;font-size:14px !important}
#ebook-modal .ebook-modal-forms ._form .iti__search-input{border-radius:10px 10px 0 0 !important}

/* The consent tick box */
#ebook-modal .ebook-modal-forms ._form ._checkbox-radio{display:flex !important;align-items:flex-start;gap:10px;margin:0 !important}
#ebook-modal .ebook-modal-forms ._form input[type="checkbox"],
#ebook-modal .ebook-modal-forms ._form input[type="radio"]{
  flex-shrink:0;width:18px !important;height:18px !important;margin:2px 0 0 !important;accent-color:var(--orange);cursor:pointer;
}
#ebook-modal .ebook-modal-forms ._form ._checkbox-radio label{
  display:inline !important;font-size:13px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;
  line-height:1.5 !important;color:var(--muted) !important;cursor:pointer;
}

/* The button: the site's primary button */
#ebook-modal .ebook-modal-forms ._form ._button-wrapper{margin:8px 0 0 !important;padding:0 !important;text-align:left !important}
#ebook-modal .ebook-modal-forms ._form ._submit{
  display:inline-flex !important;align-items:center;justify-content:center;width:auto !important;min-width:0 !important;height:auto !important;margin:0 !important;
  padding:16px 30px !important;border:1px solid var(--orange) !important;border-radius:var(--radius-btn) !important;
  background:var(--orange) !important;color:#fff !important;box-shadow:none !important;
  font-size:15px !important;font-weight:700 !important;line-height:1.2 !important;letter-spacing:0.005em !important;text-transform:none !important;
  cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
#ebook-modal .ebook-modal-forms ._form ._submit:hover{background:var(--orange-dark) !important;border-color:var(--orange-dark) !important}
#ebook-modal .ebook-modal-forms ._form ._submit:focus-visible{outline:2px solid var(--orange) !important;outline-offset:3px !important}
#ebook-modal .ebook-modal-forms ._form ._submit:disabled{opacity:0.6;cursor:default}

/* Errors and the thank-you message */
#ebook-modal .ebook-modal-forms ._form ._error-inner,
#ebook-modal .ebook-modal-forms ._form ._error-inner *{font-size:13px !important;line-height:1.4 !important}
#ebook-modal .ebook-modal-forms ._form ._form-thank-you{font-size:17px !important;line-height:1.6 !important;color:var(--light) !important;text-align:left !important;padding:0 !important}
#ebook-modal .ebook-modal-forms ._form ._clear-element{display:none !important}

@media (max-width:640px){
  .ebook-modal{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .ebook-modal-box{padding:32px 20px 24px}
  .ebook-modal-title{font-size:22px}
  #ebook-modal .ebook-modal-forms ._form ._submit{width:100% !important}
}