/* ==========================================
   GRID CARD LAYOUT & TYPOGRAPHY
   ========================================== */

/* 0. Toggle SFW/NSFW (Ghost Wrapper Fix) */

/* 1. Only hide the SFW thumb if the NSFW thumb wrapper actually contains an image */
article.node.node--view-mode-grid-card:has(.field--name-field-nsfw-thumbnail img) .field--name-field-sfw-thumbnail {
  display: none !important;
}

/* 2. Only hide the SFW loop if the NSFW loop actually generated a Bunny wrapper */
article.node.node--view-mode-grid-card:has(.field--name-field-nsfw-loop-id .bunny-hover-wrapper) .field--name-field-sfw-loop-id {
  display: none !important;
  pointer-events: none !important;
}

/* 1. Base Card Structure */
article.node.node--view-mode-grid-card {
  display: flex;
  flex-direction: column;
  /* Strip all default spacing from the outer wrapper */
  margin: 0;
  padding: 0;
}

/* 2. The Thumbnail & Video Wrapper (Move to Top) */
article.node.node--view-mode-grid-card .node__content {
  order: -1; 
  width: 100%;
  margin: 0 !important; 
  padding: 0 !important;
  position: relative; /* Anchor for the absolute mouseover hover loop overlay */
  overflow: hidden;   /* Keeps the absolute hover iframe safely clipped within the card width */
  border-radius: 8px; /* Match the border radius of the static thumbnail images */
}

/* Nuke Olivero's default margins on the inner field wrappers */
article.node.node--view-mode-grid-card .node__content .field {
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Ensure the images fit cleanly and lock the aspect ratio */
article.node.node--view-mode-grid-card .node__content .field__item img,
article.node.node--view-mode-grid-card .node__content .field__item video {
  width: 100%;
  aspect-ratio: 16 / 9; /* Standard landscape video ratio */
  object-fit: contain; 
  background-color: transparent; 
  border-radius: 8px;
  display: block;
  margin: 0 !important;
}

/* Force the dynamic mouseover iframe to respect the same bounding aesthetics */
.bunny-hover-wrapper iframe {
  border-radius: 8px;
  object-fit: contain;
}

/* Hide the field labels */
article.node.node--view-mode-grid-card .field__label {
  display: none !important;
}

/* 4. The Header Wrapper (Contains Title & Meta) */
article.node.node--view-mode-grid-card header {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Space between the Title and the Avatar */
  order: 1;
  /* THIS is the only spacing between the image and the title */
  margin: 8px 0 0 0 !important; 
  padding: 0 !important;
}

/* 5. The Title */
article.node.node--view-mode-grid-card .node__title {
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
  margin: 0 !important; 
  padding: 0 !important;
  font-weight: 600;
}

article.node.node--view-mode-grid-card .node__title a {
  text-decoration: none;
}

/* 6. Layout the Avatar and Author info */
article.node.node--view-mode-grid-card .node__meta {
  display: flex;
  align-items: flex-start; /* Pulls the avatar and text to the top edge */
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the "By" and ", Date" text by shrinking it to 0 */
article.node.node--view-mode-grid-card .node__meta > span {
  font-size: 0 !important;
  line-height: 1 !important; /* Strips hidden vertical spacing */
  padding-top: 2px; /* A tiny visual nudge so the flat letters match the curve of the avatar */
}

/* Restore the font size ONLY for the username link */
article.node.node--view-mode-grid-card .node__author,
article.node.node--view-mode-grid-card .node__author a {
  font-size: 0.85rem !important;
  line-height: 1 !important; /* Keeps the text block perfectly tight */
  color: #666;
  text-decoration: none;
}

/* 7. Shrink the Profile Picture and make it round */
article.node.node--view-mode-grid-card .node__author-image {
  margin: 0 !important;
  padding: 0 !important;
}

article.node.node--view-mode-grid-card .node__author-image img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

/* 8. Hide the admin "Masquerade" link */
article.node.node--view-mode-grid-card .node__author-image a:not(:has(img)) {
  display: none !important;
}

/* ==========================================
   THE FLUID GRID CONTAINER
   ========================================== */

/* 1. The Grid Container (Targeting the inner wrapper) */
.fluid-grid .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; 
}

/* 2. Force 2-columns on mobile */
@media (max-width: 600px) {
  .fluid-grid .view-content {
    grid-template-columns: 1fr 1fr;
    gap: 12px; 
  }
}

/* ==========================================
   FLAG / LINK OVERLAY FIX (HOVER TRAP)
   ========================================== */

/* Force the Bookmark and Buy flags to punch through the video player */
article.node.node--view-mode-grid-card .flag,
article.node.node--view-mode-grid-card .flag-action,
article.node.node--view-mode-grid-card .node__links {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important; /* Guarantees they intercept the mouse click */
}

/* ==========================================
   DESKTOP NAVIGATION (ANTI-HAMBURGER SLEDGEHAMMER V3)
   Menus stack vertically, but links inside them remain horizontal rows
========================================== */

@media (min-width: 62.5rem) { /* Target desktop screens (1000px and up) */
  
  /* 1. Hide the Hamburger Button */
  body.is-always-mobile-nav .mobile-buttons,
  .mobile-buttons {
    display: none !important;
  }

  /* 2. The Main Wrapper: Stack the two menus vertically */
  body.is-always-mobile-nav .header-nav,
  .header-nav {
    display: flex !important;
    position: static !important;
    visibility: visible !important;
    transform: none !important;
    flex-direction: column !important; /* <--- Stacks blocks vertically */
    align-items: flex-end !important; /* Aligns both menus to the right edge */
    justify-content: center !important;
    gap: 12px !important; /* Adds vertical breathing room between the two menus */
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 12px !important; 
  }
  
  /* 3. Kill the dark mobile overlay screen */
  body.is-always-mobile-nav .header-nav-overlay,
  .header-nav-overlay {
    display: none !important;
  }

  /* 4. Primary Menu (Home, FAQs): Keep links horizontal */
  body.is-always-mobile-nav .primary-nav__menu--level-1,
  .primary-nav__menu--level-1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important; 
  }

  body.is-always-mobile-nav .primary-nav__menu-item,
  .primary-nav__menu-item {
    display: block !important;
    width: auto !important; 
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 5. Secondary Menu (User Menu): Keep links horizontal */
  body.is-always-mobile-nav .secondary-nav__menu--level-1,
  .secondary-nav__menu--level-1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important; /* Removed side margin since they are stacked */
    padding: 0 !important;
    width: auto !important;
  }
  
  body.is-always-mobile-nav .secondary-nav__menu-item,
  .secondary-nav__menu-item {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

/* Reveal field labels specifically for Tagging fields on the Grid Card */
article.node.node--view-mode-grid-card [class*="field--name-field-tagging-"] .field__label {
    display: inline-block !important; /* Overrides the global display: none */
    font-size: 0.85em; /* Makes it slightly smaller than the username */
    color: #a0a0a0; /* A subtle gray so it doesn't overpower the name */
    margin-right: 4px;
    font-weight: normal;
}

/* Optional: Add a clean colon after the role label (e.g., "MUA: Username") */
article.node.node--view-mode-grid-card [class*="field--name-field-tagging-"] .field__label::after {
    content: ":";
}

/* Ensure multiple tagged users sit inline nicely */
article.node.node--view-mode-grid-card [class*="field--name-field-tagging-"] .field__item {
    display: inline-block;
    margin-right: 8px; /* Adds space if there are multiple performers tagged */
}