/* GaryVee Wallpapers – changes on top of the original WordPress styles (Oct 2026).
   Loaded last on every page. Built into the pages by tools/build_static.py. */

/* Download button under every wallpaper */
.gv-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #1a1a1a;
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.gv-download:hover,
.gv-download:focus-visible { background: #cc3366; }
.gv-download:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.gv-download:active { transform: translateY(1px); }
.gv-download svg { width: 18px; height: 18px; flex: none; }
.gv-download span { white-space: nowrap; }

/* Home gallery: button spans the card; it sits outside the hover overlay */
.bdt-post-gallery .bdt-gallery-item .gv-download { width: 100%; }
/* Thumbnails had a fixed 500 px height, which cut off the sides of every wallpaper on phones
   (and the top/bottom on tablets). Phone-wallpaper shape instead: the whole wallpaper shows. */
.elementor-1222 .elementor-element.elementor-element-88ca912 .bdt-gallery-thumbnail img {
  height: auto;
  aspect-ratio: 9 / 16;
}

/* Post page: wallpaper and button fit on one screen */
.single-post .page-content img.aligncenter {
  width: auto;
  max-width: 100%;
  height: min(1244px, max(320px, calc(100vh - 340px)));
  height: min(1244px, max(320px, calc(100svh - 340px)));
  -o-object-fit: contain;
  object-fit: contain;
}
.gv-download-wrap { margin: 16px 0 8px; text-align: center; }
.gv-download--large { display: inline-flex; padding: 13px 30px; font-size: 17px; }
.gv-download-meta { display: block; margin-top: 8px; font-size: 13px; color: #767676; }

/* Tag/category pages: the whole wallpaper instead of a cropped strip */
.post .wp-post-image {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  max-height: none;
  -o-object-fit: contain;
  object-fit: contain;
}
.archive .post .gv-download { max-width: 360px; }
.archive .post { margin-bottom: 36px; }

/* Phones: two wallpapers per row instead of one (half the scrolling) */
@media (max-width: 639px) {
  .bdt-post-gallery.bdt-grid-medium { margin-left: -12px; }
  .bdt-post-gallery.bdt-grid-medium > * { padding-left: 12px; }
  .bdt-post-gallery.bdt-grid-medium > .bdt-grid-margin { margin-top: 18px; }
  .bdt-post-gallery .bdt-gallery-item .bdt-gallery-item-title { font-size: 15px; line-height: 1.25; }
  .bdt-post-gallery .bdt-gallery-item .gv-download { gap: 6px; padding: 10px 8px; font-size: 14px; }
}

/* Home: short intro (the page's H1) and questions & answers at the end */
.gv-intro { max-width: 760px; margin: 30px auto 28px; padding: 0 20px; text-align: center; }
.gv-intro h1 { margin: 0 0 8px; color: #232323; font-family: Roboto, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; }
.gv-intro p { margin: 0; color: #555; font-family: Roboto, sans-serif; font-size: 16px; line-height: 1.5; }
.gv-faq { max-width: 760px; margin: 64px auto 56px; padding: 0 20px; font-family: Roboto, sans-serif; }
.gv-faq h2 { margin: 0 0 12px; color: #232323; font-size: 24px; font-weight: 700; }
.gv-faq details { padding: 14px 0; border-top: 1px solid #e6e6e6; }
.gv-faq details:last-of-type { border-bottom: 1px solid #e6e6e6; }
.gv-faq summary { position: relative; padding-right: 32px; color: #232323; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.gv-faq summary::-webkit-details-marker { display: none; }
.gv-faq summary::after { content: "+"; position: absolute; top: -3px; right: 4px; color: #999; font-size: 22px; font-weight: 400; }
.gv-faq details[open] summary::after { content: "\2013"; }
.gv-faq details p { margin: 10px 0 2px; color: #555; font-size: 16px; line-height: 1.6; }
@media (max-width: 639px) {
  .gv-intro { margin: 20px auto 20px; }
  .gv-intro h1 { font-size: 23px; }
  .gv-intro p { font-size: 15px; }
  .gv-faq { margin: 44px auto 40px; }
  .gv-faq h2 { font-size: 21px; }
  .gv-faq summary { font-size: 16px; }
}

/* Post page: one line about the wallpaper and four related ones */
.gv-about { max-width: 560px; margin: 6px auto 0; color: #555; font-size: 15px; line-height: 1.55; text-align: center; }
.gv-related { max-width: 760px; margin: 48px auto 32px; }
.gv-related h2 { margin: 0 0 14px; font-size: 22px; }
.gv-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gv-related-card { display: block; color: #333; font-size: 14px; line-height: 1.35; text-decoration: none; }
.gv-related-card img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; -o-object-fit: cover; object-fit: cover; border-radius: 4px; }
.gv-related-card span { display: block; margin-top: 6px; }
.gv-related-card:hover span { color: #cc3366; }
.gv-related-all { margin: 16px 0 0; }
@media (max-width: 639px) {
  .gv-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}