/*
 * gjc-site-portfolio.css — portfolio singles only (printed by gjc-site-css.php on is_singular('portfolio'),
 * before gjc-site.css).
 *
 * Layout of the hand-built project content that follows the Premium Overview widget (IK Plus reference).
 * Replaces Elementor Custom Code 20819 (2026-10-09); its Essential Addons gallery rules were dropped —
 * that plugin is no longer installed and no project renders its gallery.
 */

@media (min-width: 64.0625rem) {
  /* One content canvas after the Premium Overview. */
  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:first-of-type:not(.gjc-portfolio-premium-root) {
    margin-top: 2.5rem;
  }

  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) > .elementor-container {
    width: min(100% - 2.5rem, 75rem);
    max-width: none;
  }

  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding: 0;
  }

  /* Chapter rhythm. */
  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) .elementor-widget-heading .elementor-heading-title {
    margin: 0;
  }

  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) .elementor-widget-heading + .elementor-widget-text-editor {
    max-width: 44rem;
    margin-top: 0.5rem;
  }

  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) .elementor-widget-text-editor + .elementor-widget-image,
  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) .elementor-widget-text-editor + .elementor-widget-image-carousel {
    margin-top: 2rem;
  }

  /* Whether a chapter has body copy or not, its title sits 32px above the first image,
     carousel, video or HTML showcase. */
  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) .elementor-widget-heading + .elementor-widget-image,
  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) .elementor-widget-heading + .elementor-widget-image-carousel,
  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) .elementor-widget-heading + .elementor-widget-video,
  .single-portfolio .elementor[data-elementor-post-type="portfolio"] > .elementor-top-section:not(.gjc-portfolio-premium-root) .elementor-widget-heading + .elementor-widget-html {
    margin-top: 2rem;
  }

  /* Đắk Lắk (15480): keep its bespoke flow, inside the same 1200px canvas as the Premium Overview. */
  .single-portfolio.postid-15480 .elementor-15480 > .e-con > .e-con-inner {
    width: min(100% - 2.5rem, 75rem);
    max-width: none;
  }
}

/* Portfolio summaries break in natural phrase groups. */
.single-portfolio .gjc-portfolio-premium-overview__summary,
.single-portfolio .gjc-portfolio-premium-overview__summary p {
  text-wrap: pretty;
}

/* Content-to-footer breathing room. */
body.single-portfolio .elementor[data-elementor-type="wp-post"] {
  padding-bottom: 5rem;
}

/* ── Per-project rules (moved from Elementor page "Custom CSS", a PRO Elements feature, 2026-10-09) ──
   :where() keeps the original specificity; the body class only scopes the rule to its project. */

/* Thiện Toàn Store (3892): full-bleed coloured bars — zero the side padding of template 19564's container. */
:where(body.postid-3892) .elementor-element-32e7d549 {
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Penato (14287): video thumbnail fallback, so the area never looks empty before / without YouTube. */
:where(body.postid-14287) .elementor-element-73fe497 .elementor-wrapper {
  position: relative;
  background: #1b1c1c url('https://gudjob.net/wp-content/uploads/2026/08/penato-video-thumb.jpg') center / cover no-repeat;
}

:where(body.postid-14287) .elementor-element-73fe497 .elementor-wrapper::after {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.5rem;
  height: 3.5rem;
  content: '';
  background: color-mix(in srgb, var(--e-global-color-900224d, #fff) 92%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23050505'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 40% no-repeat;
  border-radius: 50%;
  box-shadow: 0 0.4rem 1rem color-mix(in srgb, #050505 25%, transparent);
  pointer-events: none;
}

/* Penato packaging: the gallery sits beside the video (desktop), both aligned to the row start, with the video's 32px heading gap. */
@media (min-width: 1025px) {
  :where(body.postid-14287) .elementor-element-60d2a0f {
    width: 50% !important;
    max-width: 50% !important;
    flex-basis: 50% !important;
    margin-top: 32px;
  }
}

:where(body.postid-14287) .elementor-element-73fe497,
:where(body.postid-14287) .elementor-element-60d2a0f {
  align-self: flex-start;
}

/* Đắk Lắk (15480): concept pills in the hero's connected-pill style. */
body .elementor-15480 .elementor-element.elementor-element-80fb8ed .elementor-button,
body .elementor-15480 .elementor-element.elementor-element-e18e5d2 .elementor-button {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.125rem;
  padding: 0.5rem 0.8rem;
  color: var(--e-global-color-primary);
  background: var(--e-global-color-900224d, #ffffff);
  border: 0.0625rem solid color-mix(in srgb, var(--e-global-color-primary) 12%, transparent);
  border-radius: 999rem;
  font-size: var(--e-global-typography-accent-font-size, 0.75rem);
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--e-global-color-primary) 9%, transparent);
  position: relative;
}

body .elementor-15480 .elementor-element.elementor-element-80fb8ed .elementor-button:hover,
body .elementor-15480 .elementor-element.elementor-element-e18e5d2 .elementor-button:hover {
  color: var(--e-global-color-primary);
  background: var(--e-global-color-900224d, #ffffff);
  border-color: color-mix(in srgb, var(--e-global-color-primary) 22%, transparent);
  box-shadow: 0 0.5rem 1.1rem color-mix(in srgb, var(--e-global-color-primary) 12%, transparent);
}

body .elementor-15480 .elementor-element.elementor-element-80fb8ed .elementor-button::before,
body .elementor-15480 .elementor-element.elementor-element-e18e5d2 .elementor-button::before {
  content: '';
  flex: 0 0 auto;
  width: 0.45rem;
  aspect-ratio: 1;
  background: var(--e-global-color-accent);
  border-radius: 50%;
}

body .elementor-15480 .elementor-element.elementor-element-80fb8ed .elementor-button::after,
body .elementor-15480 .elementor-element.elementor-element-e18e5d2 .elementor-button::after {
  position: absolute;
  top: 50%;
  left: 0.8rem;
  width: 0.45rem;
  aspect-ratio: 1;
  content: '';
  pointer-events: none;
  border: 0.0625rem solid color-mix(in srgb, var(--e-global-color-accent, #e3185c) 52%, transparent);
  border-radius: 50%;
  opacity: 0.5;
  transform: translateY(-50%) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  body .elementor-15480 .elementor-element.elementor-element-80fb8ed .elementor-button::after,
  body .elementor-15480 .elementor-element.elementor-element-e18e5d2 .elementor-button::after {
    animation: gjc-daklak-pill-ping 2.4s ease-out infinite;
  }
}

@keyframes gjc-daklak-pill-ping {
  0% { opacity: 0.55; transform: translateY(-50%) scale(1); }
  72%, 100% { opacity: 0; transform: translateY(-50%) scale(2.6); }
}

/* Colokit x Doraemon (21650): chapter media sits 16px under its heading. */
.elementor-21650 .elementor-element.elementor-element-5cdfe58a.gjc-portfolio-chapter-media {
  margin-top: 16px !important;
}