/* ========================================================================== REVIEW CARD SPECIFICS Core structure/layout live in card-core.css + card-layout.css ========================================================================== */ /* Review Card Structure - Missing Classes */ /* CRITICAL: This rule only applies to review headers NOT in .cards-grid */ .review-card:not(.cards-grid .review-card) .review-header, .new-review-card:not(.cards-grid .new-review-card) .review-header { color: white; padding: 20px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; height: 230px !important; min-height: 230px !important; max-height: 230px !important; position: relative; flex-shrink: 0; width: 100%; z-index: 1 !important; /* Lower than card-actions buttons */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .review-header--default { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .review-header--book { background: linear-gradient(135deg, #1b6dc1 0%, #6dd5fa 100%); } .review-header--article { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); } .review-header--author { background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%); } .review-header--general, .review-header--general-topic { background: linear-gradient(135deg, #5f2c82 0%, #49a09d 100%); } .review-date-header { position: absolute; bottom: 12px; left: 20px; padding: 0; margin: 0; z-index: 2; } .review-date-text { color: rgba(255, 255, 255, 0.9); /* Responsive typography: scales from 0.7rem (mobile) to 0.8rem (desktop) */ font-size: clamp(0.7rem, 2vw, 0.8rem); font-weight: 500; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } /* Grid cards: inset wrappers hold padding; outer shell fills card for gradient/bg */ .cards-grid .review-card .review-header-inset, .cards-grid .new-review-card .review-header-inset { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; padding: var(--card-header-padding, 20px) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: space-between !important; position: relative !important; overflow: hidden !important; } .cards-grid .review-card .review-content-inset, .cards-grid .new-review-card .review-content-inset { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; padding: var(--card-body-padding-study, clamp(10px, 0.75em, 16px)) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .cards-grid .review-card .review-header:has(.review-header-inset), .cards-grid .new-review-card .review-header:has(.review-header-inset), .cards-grid .review-card > .position-relative > .review-header:has(.review-header-inset), .cards-grid .new-review-card > .position-relative > .review-header:has(.review-header-inset) { padding: 0 !important; } .cards-grid .review-card .review-content-area:has(.review-content-inset), .cards-grid .new-review-card .review-content-area:has(.review-content-inset) { padding: 0 !important; } .cards-grid .review-header-inset .review-title-text { padding-right: 0 !important; padding-left: 0 !important; } .cards-grid .review-header-inset .review-date-header { left: 0 !important; right: auto !important; bottom: 0 !important; } .review-title-text { /* Responsive typography: scales from 0.9rem (mobile) to 1.1rem (desktop) */ /* Prevents text overflow on small screens while maintaining readability */ font-size: clamp(0.9rem, 2.5vw, 1.1rem); font-weight: 700; line-height: 1.3; margin-bottom: clamp(8px, 0.75em, 12px); /* Responsive margin */ color: white; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; align-self: stretch; padding-top: clamp(6px, 0.5em, 8px); /* Responsive padding */ padding-right: clamp(8px, 0.75em, 12px); /* Responsive padding */ padding-left: clamp(8px, 0.75em, 12px); /* Responsive padding */ padding-bottom: 0; margin-left: 0; margin-right: 0; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; width: 100%; box-sizing: border-box; /* Default font-family with Persian support - includes fonts that support both Latin and Persian/Arabic */ font-family: 'Segoe UI', 'Tahoma', 'Arial', 'Noto Sans Arabic', 'Arabic Typesetting', 'Amiri', sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Persian/RTL titles - align right (start from right, end on left) */ .review-title-text[dir="rtl"], .review-title-text.direction-rtl { text-align: right; direction: rtl; align-self: stretch; /* Persian/Arabic fonts for proper rendering */ font-family: 'Amiri', 'Scheherazade New', 'Noto Sans Arabic', 'Arabic Typesetting', 'Tahoma', 'Arial', serif; font-feature-settings: "liga" 1, "kern" 1, "swsh" 1; } /* English/LTR titles - align left (start from left, end on right) */ .review-title-text[dir="ltr"], .review-title-text.direction-ltr { text-align: left; direction: ltr; align-self: stretch; /* For LTR text, use standard fonts but keep Persian support in fallback */ font-family: 'Segoe UI', 'Tahoma', 'Arial', 'Noto Sans Arabic', sans-serif; } /* Persian text in LTR direction - detect by lang attribute or persian-text class */ /* When Persian text is forced to LTR, still use Persian fonts for proper rendering */ .review-title-text[dir="ltr"]:lang("fa"), .review-title-text[dir="ltr"][lang="fa"], .review-title-text.direction-ltr:lang("fa"), .review-title-text.direction-ltr[lang="fa"], .review-title-text[dir="ltr"].persian-text, .review-title-text.direction-ltr.persian-text { /* Persian fonts even when direction is LTR */ font-family: 'Amiri', 'Scheherazade New', 'Noto Sans Arabic', 'Arabic Typesetting', 'Tahoma', 'Arial', serif; font-feature-settings: "liga" 1, "kern" 1, "swsh" 1; } /* General rule for Persian text regardless of direction */ .review-title-text.persian-text, .review-title-text[lang="fa"] { /* Persian fonts for proper rendering */ font-family: 'Amiri', 'Scheherazade New', 'Noto Sans Arabic', 'Arabic Typesetting', 'Tahoma', 'Arial', serif; font-feature-settings: "liga" 1, "kern" 1, "swsh" 1; } .review-star { font-size: 1.8rem; opacity: 0.9; margin: 8px 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* Link badge - icon only (preserve original icon colors) */ .review-link-badge.icon-only { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Review link icon - responsive; prevents SVG from blowing up on mobile/expanded */ .review-link-icon { display: block; object-fit: contain; width: clamp(24px, 6vw, 40px); height: clamp(24px, 6vw, 40px); max-width: 40px; max-height: 40px; filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; transition: transform 0.25s ease; } .review-link-badge.icon-only .review-link-icon { width: clamp(24px, 6vw, 40px); height: clamp(24px, 6vw, 40px); max-width: 40px; max-height: 40px; object-fit: contain; filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; } .review-link-badge.icon-only:hover .review-link-icon { animation: review-link-bounce 0.5s ease; } @keyframes review-link-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* Mobile/tablet: keep icon compact, especially when card is expanded */ @media (max-width: 991.98px) { .review-link-icon, .review-link-badge.icon-only .review-link-icon { width: clamp(22px, 5vw, 32px); height: clamp(22px, 5vw, 32px); max-width: 32px; max-height: 32px; } } @media (max-width: 575.98px) { .review-link-icon, .review-link-badge.icon-only .review-link-icon { width: 20px; height: 20px; max-width: 20px; max-height: 20px; } /* Expanded card on phone: icon stays small, never scales with layout */ .review-card.mobile-expanded .review-link-icon, .new-review-card.mobile-expanded .review-link-icon, .cards-grid > .mobile-expanded .review-link-icon { width: 24px !important; height: 24px !important; max-width: 24px !important; max-height: 24px !important; } } .review-book-link { margin-top: auto; padding-bottom: 8px; } .book-link { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .book-link:hover { background: rgba(255, 255, 255, 0.25); color: white; text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .book-title { font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .private-badge { position: absolute; top: 12px; left: 12px; background: rgba(255, 193, 7, 0.9); color: #000; padding: 4px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 500; z-index: 2; } .review-card:not(.mobile-expanded) .review-content-area, .new-review-card:not(.mobile-expanded) .review-content-area { flex: 1 1 auto; display: flex; flex-direction: column; padding: var(--card-body-padding-study); /* Align with publication/study body padding */ overflow: hidden; min-height: 0 !important; /* CRITICAL: Allow flex shrinking */ max-height: none !important; /* Remove max-height constraint */ justify-content: stretch; width: 100%; flex-shrink: 1; flex-grow: 1; box-sizing: border-box !important; /* CRITICAL: Include padding in width calculation */ } /* Review card body scrollbars: keep scrolling, make them very thin */ .cards-grid .review-card .review-content-area, .cards-grid .new-review-card .review-content-area { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.25) transparent; } .cards-grid .review-card .review-content-area::-webkit-scrollbar, .cards-grid .new-review-card .review-content-area::-webkit-scrollbar { width: 4px; } .cards-grid .review-card .review-content-area::-webkit-scrollbar-track, .cards-grid .new-review-card .review-content-area::-webkit-scrollbar-track { background: transparent; } .cards-grid .review-card .review-content-area::-webkit-scrollbar-thumb, .cards-grid .new-review-card .review-content-area::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.25); border-radius: 999px; } .review-text-content { flex: 1 1 auto; color: #333333; /* CRITICAL: Removed font-size: 1rem to allow Word formatting (12-18px) on child elements to take precedence */ /* Child elements with inline font-size (from Word) will have their sizes preserved */ /* Default font-size will only apply to elements without explicit font-size */ /* line-height: 1.6; */ /* Commented out - let Word formatting control line-height */ text-align: justify !important; /* CRITICAL: Removed font-family to allow Word formatting on child elements to take precedence */ /* Child elements with inline font-family (from Word) will have their fonts preserved */ /* Fallback font will only apply to elements without explicit font-family */ font-family: inherit; /* Inherit from parent, or let child elements specify their own */ overflow: hidden; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0; min-height: 0 !important; /* CRITICAL: Allow flex shrinking */ width: 100%; max-width: 100% !important; /* CRITICAL: Prevent overflow beyond parent */ box-sizing: border-box !important; /* CRITICAL: Include padding/border in width calculation */ word-spacing: normal !important; /* CRITICAL: Use normal word-spacing to prevent visual misalignment */ letter-spacing: normal !important; /* CRITICAL: Use normal letter-spacing to prevent visual misalignment */ hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } /* CRITICAL: Responsive font-size for review-text-content elements WITHOUT inline font-size */ /* This preserves Word formatting (elements with inline font-size are NOT affected) */ /* Only applies to elements that don't have inline font-size styles */ .review-text-content > *:not([style*="font-size"]) { font-size: clamp(0.85rem, 1vw, 1rem) !important; /* Responsive base font-size */ } /* For nested elements without inline font-size - preserve Word formatting for elements that have it */ .review-text-content *:not([style*="font-size"]) { font-size: clamp(0.85rem, 1vw, 1rem) !important; /* Responsive base font-size */ } /* Preview mode: truncate to 8 lines with ellipsis */ .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; -webkit-box-align: start; text-overflow: ellipsis; overflow: hidden; align-self: flex-start; /* CRITICAL: Don't set direction/font-family here - let review-text-direction.js handle it */ /* CRITICAL: Don't override Word formatting - preserve inline styles from content */ /* CRITICAL: Allow mixed direction content (unicode-bidi: embed) */ unicode-bidi: embed; } /* Preview cards: preserve Word paragraph breaks (match details / publisher-content). Do NOT flatten

to inline — title line and body must stay on separate lines when the source HTML has that structure. */ .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p { display: block !important; margin-top: 0 !important; margin-bottom: 1em !important; line-height: 1.6 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; max-width: 100% !important; } .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p:empty, .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p:empty, .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p[data-empty-paragraph="true"], .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p[data-empty-paragraph="true"] { display: block !important; min-height: 1em !important; margin-top: 0 !important; margin-bottom: 1em !important; } .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p:first-child, .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p:first-child { margin-top: 0 !important; } .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p:last-child, .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p:last-child { margin-bottom: 0 !important; } /* Wrapper divs from Word: block flow, no extra top spacing */ .review-card:not(.mobile-expanded) .review-text-content.review-text-preview > div, .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview > div { display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* Ensure preview content preserves Word formatting */ .review-text-content.review-text-preview * { /* Preserve all inline styles from Word (font-family, font-size, color, etc.) */ /* Don't override - let Word formatting take precedence */ } /* CRITICAL: Ensure paragraphs and spans inside review-text-content don't have margins causing misalignment */ .review-text-content p, .review-text-content span, .review-text-content div { margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; position: relative !important; } /* Grid card previews: avoid width:100% on Word HTML — it expands layout box past clipped card */ .cards-grid .review-card:not(.mobile-expanded) .review-text-content p, .cards-grid .review-card:not(.mobile-expanded) .review-text-content span, .cards-grid .review-card:not(.mobile-expanded) .review-text-content div, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content p, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content span, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content div { width: auto !important; } /* CRITICAL: Ensure nested elements also respect boundaries */ .review-text-content * { max-width: 100% !important; /* Prevent any nested element from overflowing */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Fallback content styling */ .review-text-content.fallback-content { background-color: #f8f9fa; color: #6c757d; font-style: italic; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; border-radius: 8px; border: 1px solid #e9ecef; } .review-text-content.fallback-content i { color: #6c757d; opacity: 0.7; } .review-text-content.fallback-content span { font-size: 0.9rem; font-weight: 500; } /* CRITICAL: Do NOT override font-family for Word-formatted content */ /* Elements with inline font-family styles (from Word) should preserve their fonts */ .review-text-content *[style*="font-family"] { /* Font-family is already set inline with !important - let it be preserved */ /* Don't inherit or override parent's font-family */ } .review-text-content.fallback-content { background-color: #f8f9fa; color: #6c757d; font-style: italic; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; } .review-text-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; min-height: 0 !important; /* CRITICAL: Allow flex shrinking */ overflow-y: auto; /* Allow scrolling if content exceeds available space */ } /* CRITICAL: Prevent Bootstrap grid classes inside review cards from breaking layout */ .review-card .review-content-area *[class*="col-"], .review-card .review-text-content *[class*="col-"], .review-card .review-text-wrapper *[class*="col-"] { display: block !important; flex: none !important; max-width: 100% !important; width: 100% !important; float: none !important; } .review-card .review-content-area .row, .review-card .review-text-content .row, .review-card .review-text-wrapper .row { display: block !important; margin-left: 0 !important; margin-right: 0 !important; } .private-review-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* CRITICAL: For cards in grid, profile-grid-layout.css handles footer sizing to match post cards (22px) */ /* This rule only applies to review cards NOT in .cards-grid */ .review-card:not(.cards-grid .review-card):not(.cards-grid .new-review-card) .review-footer, .new-review-card:not(.cards-grid .review-card):not(.cards-grid .new-review-card) .review-footer { background-color: #f8f9fa; border-top: 1px solid #dee2e6; padding: 8px 16px 8px 16px !important; display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 12px !important; flex-shrink: 0 !important; flex-grow: 0 !important; width: 100%; margin-top: auto !important; margin-bottom: 0 !important; padding-bottom: 8px !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 10 !important; flex-wrap: nowrap !important; min-height: var(--card-footer-min-height, 2.5rem) !important; box-sizing: border-box !important; border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; overflow: visible !important; align-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; /* CRITICAL: Ensure footer content is not clipped */ clip-path: none !important; -webkit-clip-path: none !important; } /* Footer dimensions are defined once in the SINGLE CARD block at the top of this file */ /* CRITICAL: Ensure footer content has proper bottom spacing and visibility */ .review-footer > * { margin-bottom: 0 !important; position: relative !important; z-index: 11 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* CRITICAL: Review cards use grid layout when inside .cards-grid (card-layout.css / profile _grid-layout). */ /* This rule applies ONLY to review cards that are NOT direct children of .cards-grid (e.g. detail page, search). */ /* Use direct-child exclusion so grid cards never get flex; descendant :not() can be unreliable. */ .review-card:not(.cards-grid > .review-card):not(.cards-grid > .new-review-card), .new-review-card:not(.cards-grid > .review-card):not(.cards-grid > .new-review-card) { display: flex !important; flex-direction: column !important; overflow: hidden !important; position: relative !important; border-radius: 12px !important; padding: 0 !important; margin: 0 !important; } /* CRITICAL: Allow footer to extend beyond card's overflow clipping */ .review-card .review-footer, .new-review-card .review-footer { /* Override parent's overflow for footer */ position: relative !important; z-index: 10 !important; /* Ensure footer is not clipped by parent overflow */ transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; } /* CRITICAL: Ensure footer is not clipped by card's overflow */ .review-card .review-footer, .new-review-card .review-footer { /* Ensure footer is fully contained within card boundaries */ max-width: 100% !important; width: 100% !important; } /* CRITICAL: Footer should extend to card's bottom edge with matching border-radius */ .review-card .review-footer, .new-review-card .review-footer { margin-top: auto !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; align-self: stretch !important; position: relative !important; bottom: 0 !important; padding-bottom: 8px !important; min-height: 44px !important; /* CRITICAL: Ensure footer background extends to bottom edge */ background-clip: border-box !important; /* CRITICAL: Ensure footer content is not clipped */ overflow: visible !important; } /* Grid reviews must match unified card footer dimensions */ .cards-grid .review-card .review-footer, .cards-grid .new-review-card .review-footer { padding: var(--card-footer-padding) !important; min-height: var(--card-footer-min-height, 2.5rem) !important; } /* CRITICAL: Only hide overflow on content, not footer */ .review-card:not(.mobile-expanded) .review-content-area, .new-review-card:not(.mobile-expanded) .review-content-area { overflow: hidden !important; } /* CRITICAL: Review content area uses grid layout, not flex */ /* This rule is overridden by profile-grid-layout.css for cards in grid */ /* CRITICAL: For cards in grid, profile-grid-layout.css takes precedence */ .review-content-area:not(.cards-grid .review-content-area):not(.cards-grid .new-review-card .review-content-area) { padding: 16px 16px 12px 16px !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; /* CRITICAL: Prevent overflow beyond card */ } /* CRITICAL: Limit text to exactly 8 lines with line-clamp */ .review-card:not(.mobile-expanded) .review-text-content, .new-review-card:not(.mobile-expanded) .review-text-content { padding-bottom: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; flex: 0 0 auto !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 8 !important; text-overflow: ellipsis !important; line-height: 1.7 !important; font-size: 0.95rem !important; max-height: calc(1.7 * 0.95rem * 8) !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; /* CRITICAL: Prevent overflow beyond parent */ word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Remove wrapper styles - no longer needed */ .review-text-wrapper { display: none !important; } /* ============================================ MOBILE RESPONSIVE - Zoom Reduction ============================================ */ /* Mobile devices - reduce zoom for review content area */ /* Standard approach: Use CSS zoom property for proportional scaling */ /* Zoom values: 0.85 (85%) is standard for mobile text reduction */ @media (max-width: 768px) { /* Review content area - normalized to match other cards */ .cards-grid .review-card:not(.mobile-expanded) .review-content-area, .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area, #reviews-content .cards-grid .review-card:not(.mobile-expanded) .review-content-area, #reviews-content .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area { zoom: 1 !important; } /* Phone preview: shrink body text without zoom (zoom breaks width on narrow cards) */ .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #reviews-content .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #reviews-content .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #exploreFeed .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #exploreFeed .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview { zoom: 1 !important; font-size: 0.72rem !important; line-height: 1.4 !important; max-height: calc(1.4 * 0.72rem * 8) !important; max-width: 100% !important; box-sizing: border-box !important; } .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, #reviews-content .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, #reviews-content .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, #exploreFeed .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, #exploreFeed .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p { margin-bottom: 0.7em !important; line-height: 1.4 !important; } .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p:empty, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p:empty, .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p[data-empty-paragraph="true"], .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p[data-empty-paragraph="true"] { min-height: 0.7em !important; margin-bottom: 0.7em !important; } .review-card:not(.mobile-expanded) .review-text-content, .new-review-card:not(.mobile-expanded) .review-text-content { font-size: 0.78rem !important; line-height: 1.4 !important; max-height: calc(1.4 * 0.78rem * 8) !important; } /* Fallback when zoom is unavailable: cap preview text size */ @supports not (zoom: 0.78) { .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview { font-size: 0.78rem !important; } .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview *:not(.red):not(.blue):not(.green):not(.yellow), .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview *:not(.red):not(.blue):not(.green):not(.yellow) { font-size: clamp(0.68rem, 2.6vw, 0.76rem) !important; } } /* Expanded review cards: do not shrink body text */ .cards-grid > .mobile-expanded.review-card .review-content-area, .cards-grid > .mobile-expanded.new-review-card .review-content-area, #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-content-area, #exploreFeed .explore-card.mobile-expanded .review-card .review-content-area, #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-content-area, #exploreFeed .explore-card.mobile-expanded .new-review-card .review-content-area { zoom: 1 !important; } /* CRITICAL: Prevent header and body from collapsing in device emulation / mobile grid. Footer has min-height: 44px; ensure grid rows 1 and 2 always get visible space. Use #reviews-tab-pane for maximum specificity so this wins over profile/_grid-layout.css. */ #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) > .position-relative, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative, .cards-grid .review-card:not(.mobile-expanded) > .position-relative, .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative, .cards-grid .review-card:not(.mobile-expanded) > a.review-header-link, .cards-grid .new-review-card:not(.mobile-expanded) > a.review-header-link { min-height: var(--card-header-min-height, 3rem) !important; } #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-header, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-header, .cards-grid .review-card:not(.mobile-expanded) .review-header, .cards-grid .new-review-card:not(.mobile-expanded) .review-header { min-height: var(--card-header-min-height, 3rem) !important; } #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-content-area, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area, .cards-grid .review-card:not(.mobile-expanded) .review-content-area, .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area { min-height: var(--card-body-min-height, 2.5rem) !important; justify-content: flex-start !important; } /* Expanded review cards: allow header to match unified row height */ .cards-grid > .mobile-expanded.review-card > .position-relative, .cards-grid > .mobile-expanded.new-review-card > .position-relative, #exploreFeed .explore-card-wrapper.mobile-expanded .review-card > .position-relative, #exploreFeed .explore-card.mobile-expanded .review-card > .position-relative, #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card > .position-relative, #exploreFeed .explore-card.mobile-expanded .new-review-card > .position-relative { min-height: 0 !important; } .cards-grid > .mobile-expanded.review-card .review-header, .cards-grid > .mobile-expanded.new-review-card .review-header, #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-header, #exploreFeed .explore-card.mobile-expanded .review-card .review-header, #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-header, #exploreFeed .explore-card.mobile-expanded .new-review-card .review-header { min-height: 0 !important; box-sizing: border-box !important; } /* Expanded review footer: enforce unified height/padding in all contexts */ .cards-grid > .mobile-expanded.review-card .review-footer, .cards-grid > .mobile-expanded.new-review-card .review-footer, #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-footer, #exploreFeed .explore-card.mobile-expanded .review-card .review-footer, #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-footer, #exploreFeed .explore-card.mobile-expanded .new-review-card .review-footer { min-height: var(--card-footer-expanded-min-height, var(--card-footer-min-height, 40px)) !important; height: auto !important; max-height: none !important; padding: var(--card-footer-padding, 8px 16px) !important; box-sizing: border-box !important; } } /* Small mobile devices - further zoom reduction if needed */ @media (max-width: 480px) { /* Review content area - normalized to match other cards */ .cards-grid .review-card:not(.mobile-expanded) .review-content-area, .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area, #reviews-content .cards-grid .review-card:not(.mobile-expanded) .review-content-area, #reviews-content .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area { zoom: 1 !important; } /* Very small phones: further shrink preview body text (no zoom) */ .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #reviews-content .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #reviews-content .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #exploreFeed .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #exploreFeed .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview { zoom: 1 !important; font-size: 0.68rem !important; line-height: 1.35 !important; max-height: calc(1.35 * 0.68rem * 8) !important; } .review-card:not(.mobile-expanded) .review-text-content, .new-review-card:not(.mobile-expanded) .review-text-content { font-size: 0.72rem !important; line-height: 1.35 !important; max-height: calc(1.35 * 0.72rem * 8) !important; } /* Expanded review cards: never shrink body */ .cards-grid .review-card.mobile-expanded .review-content-area, .cards-grid .new-review-card.mobile-expanded .review-content-area, #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-content-area, #exploreFeed .explore-card.mobile-expanded .review-card .review-content-area, #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-content-area, #exploreFeed .explore-card.mobile-expanded .new-review-card .review-content-area { zoom: 1 !important; } } /* ============================================ RESPONSIVE TYPOGRAPHY - Title & Date Breakpoint-based font sizes (complements clamp()) ============================================ */ /* Mobile devices - optimized font sizes */ @media (max-width: 768px) { /* Review title - smaller on mobile for better fit (normal state: 3 cards per row) */ .review-title-text { font-size: clamp(0.85rem, 2vw, 0.95rem) !important; /* Responsive font size */ line-height: 1.25 !important; /* Tighter line-height for mobile */ margin-bottom: clamp(6px, 0.6em, 10px) !important; /* Responsive margin */ padding-top: clamp(4px, 0.4em, 6px) !important; /* Responsive padding */ } /* Review date - smaller on mobile (normal state: 3 cards per row) */ .review-date-text { font-size: 0.75rem !important; /* Smaller than desktop (0.8rem) */ } /* Phone grid preview: consistent inset from card edges (LTR + RTL) */ .cards-grid .review-card:not(.mobile-expanded) > .position-relative, .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative, #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) > .position-relative, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative, #exploreFeed .review-card:not(.mobile-expanded) > .position-relative, #exploreFeed .new-review-card:not(.mobile-expanded) > .position-relative { overflow: hidden !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* Phone grid preview: margin insets (padding fails on WebKit RTL + line-clamp) */ .cards-grid .review-card:not(.mobile-expanded) .review-header-inset, .cards-grid .new-review-card:not(.mobile-expanded) .review-header-inset, .cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header > .review-header-inset, .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative > .review-header > .review-header-inset, #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-header-inset, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-header-inset, #reviews-list.cards-grid > .new-review-card:not(.mobile-expanded) .review-header-inset, #reviews-list > .review-card:not(.mobile-expanded) .review-header-inset, #reviews-list > .new-review-card:not(.mobile-expanded) .review-header-inset, #exploreFeed .review-card:not(.mobile-expanded) .review-header-inset, #exploreFeed .new-review-card:not(.mobile-expanded) .review-header-inset { width: auto !important; margin-inline: clamp(10px, 4vw, 14px) !important; padding-top: 10px !important; padding-bottom: 12px !important; padding-left: 0 !important; padding-right: 0 !important; } .cards-grid .review-card:not(.mobile-expanded) .review-header:has(.review-header-inset), .cards-grid .new-review-card:not(.mobile-expanded) .review-header:has(.review-header-inset), #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-header, #reviews-list > .review-card:not(.mobile-expanded) .review-header { padding: 0 !important; } .cards-grid .review-card:not(.mobile-expanded) .review-title-text, .cards-grid .new-review-card:not(.mobile-expanded) .review-title-text, #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-title-text, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-title-text, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-title-text, #reviews-list.cards-grid > .new-review-card:not(.mobile-expanded) .review-title-text, #reviews-list > .review-card:not(.mobile-expanded) .review-title-text, #reviews-list > .new-review-card:not(.mobile-expanded) .review-title-text, #exploreFeed .review-card:not(.mobile-expanded) .review-title-text, #exploreFeed .new-review-card:not(.mobile-expanded) .review-title-text { display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; max-height: calc(1.4em * 2.05) !important; padding-top: 2px !important; padding-bottom: 0 !important; padding-right: 0 !important; padding-left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, .cards-grid .new-review-card:not(.mobile-expanded) .review-content-inset, #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-content-inset, #reviews-content .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-content .cards-grid .new-review-card:not(.mobile-expanded) .review-content-inset, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-content-inset, #reviews-list.cards-grid > .new-review-card:not(.mobile-expanded) .review-content-inset, #reviews-list > .review-card:not(.mobile-expanded) .review-content-inset, #reviews-list > .new-review-card:not(.mobile-expanded) .review-content-inset, #exploreFeed .review-card:not(.mobile-expanded) .review-content-inset, #exploreFeed .new-review-card:not(.mobile-expanded) .review-content-inset { width: auto !important; margin-inline: clamp(10px, 4vw, 14px) !important; padding-top: clamp(8px, 2.5vw, 12px) !important; padding-bottom: clamp(8px, 2.5vw, 12px) !important; padding-left: 0 !important; padding-right: 0 !important; } .cards-grid .review-card:not(.mobile-expanded) .review-content-area:has(.review-content-inset), .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area:has(.review-content-inset), #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-content-area, #reviews-list > .review-card:not(.mobile-expanded) .review-content-area { padding: 0 !important; } .cards-grid .review-card:not(.mobile-expanded) .review-date-header, .cards-grid .new-review-card:not(.mobile-expanded) .review-date-header, #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-date-header, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-date-header, #exploreFeed .review-card:not(.mobile-expanded) .review-date-header, #exploreFeed .new-review-card:not(.mobile-expanded) .review-date-header { left: 0 !important; right: auto !important; inset-inline-start: 0 !important; bottom: 0 !important; } /* Legacy fallback when inset wrapper is absent */ .cards-grid .review-card:not(.mobile-expanded) .review-content-area:not(:has(.review-content-inset)), .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area:not(:has(.review-content-inset)) { padding-top: clamp(8px, 2.5vw, 12px) !important; padding-bottom: clamp(8px, 2.5vw, 12px) !important; padding-right: clamp(10px, 4vw, 14px) !important; padding-left: clamp(10px, 4vw, 14px) !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* Avoid -webkit-box RTL bleed: clip preview body inside padded content area */ .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #reviews-list > .review-card:not(.mobile-expanded) .review-text-content.review-text-preview { display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p, #reviews-list > .review-card:not(.mobile-expanded) .review-text-content.review-text-preview p { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; } .cards-grid .review-card:not(.mobile-expanded) .review-text-content, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content, .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview, #reviews-content .cards-grid .review-card:not(.mobile-expanded) .review-text-content, #reviews-content .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* STATE-BASED: Expanded state - larger fonts when cards are expanded */ /* CRITICAL: Use rem instead of vw for consistent scaling */ .cards-grid > .mobile-expanded .review-title-text { font-size: 1.4rem !important; /* Larger font size for better readability when expanded */ line-height: 1.5 !important; font-weight: 700 !important; margin-bottom: 0.75em !important; /* Use em for proportional spacing */ padding-top: 0.5em !important; /* Use em for proportional padding */ padding-right: 0.75em !important; /* Use em for proportional padding */ padding-left: 0.75em !important; /* Use em for proportional padding */ } .cards-grid > .mobile-expanded .review-date-text { font-size: 1rem !important; /* Larger font size for better readability when expanded */ font-weight: 500 !important; } /* CRITICAL: Responsive font-size for expanded review-text-content elements WITHOUT inline font-size */ /* This preserves Word formatting (elements with inline font-size are NOT affected) */ .cards-grid > .mobile-expanded .review-text-content > *:not([style*="font-size"]) { font-size: var(--card-body-font-size-expanded, 1.2rem) !important; } .cards-grid > .mobile-expanded .review-text-content *:not([style*="font-size"]) { font-size: var(--card-body-font-size-expanded, 1.2rem) !important; } .cards-grid > .mobile-expanded .review-text-content { line-height: var(--card-body-line-height-expanded, 1.7) !important; } } /* Small mobile devices - further optimization */ @media (max-width: 480px) { /* Review title - even smaller on very small screens (normal state: 3 cards per row) */ .review-title-text { font-size: clamp(0.8rem, 1.8vw, 0.9rem) !important; /* Responsive minimum readable size */ line-height: 1.2 !important; margin-bottom: clamp(6px, 0.5em, 8px) !important; /* Responsive margin */ padding-top: clamp(3px, 0.3em, 4px) !important; /* Responsive padding */ } /* Review date - minimum size for very small screens (normal state: 3 cards per row) */ .review-date-text { font-size: 0.7rem !important; /* Minimum readable size */ } /* Very small phones: padding on shells only when inset wrappers are absent */ .cards-grid .review-card:not(.mobile-expanded) .review-header:not(:has(.review-header-inset)), .cards-grid .new-review-card:not(.mobile-expanded) .review-header:not(:has(.review-header-inset)), .cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)), #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-header:not(:has(.review-header-inset)), #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-header:not(:has(.review-header-inset)), #reviews-list.cards-grid > .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)), #reviews-list > .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)), #exploreFeed .review-card:not(.mobile-expanded) .review-header:not(:has(.review-header-inset)), #exploreFeed .new-review-card:not(.mobile-expanded) .review-header:not(:has(.review-header-inset)) { padding-top: 8px !important; padding-bottom: 10px !important; padding-right: clamp(10px, 5vw, 12px) !important; padding-left: clamp(10px, 5vw, 12px) !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)), #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)), #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)), #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)), #reviews-list.cards-grid > .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)), #reviews-list > .review-card:not(.mobile-expanded) > .position-relative > .review-header:not(:has(.review-header-inset)) { padding-right: clamp(10px, 5vw, 12px) !important; padding-left: clamp(10px, 5vw, 12px) !important; } .cards-grid .review-card:not(.mobile-expanded) .review-date-header, .cards-grid .new-review-card:not(.mobile-expanded) .review-date-header, #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-date-header, #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-date-header, #exploreFeed .review-card:not(.mobile-expanded) .review-date-header, #exploreFeed .new-review-card:not(.mobile-expanded) .review-date-header { inset-inline-start: clamp(10px, 4vw, 12px) !important; bottom: 8px !important; } .cards-grid .review-card:not(.mobile-expanded) .review-content-area:not(:has(.review-content-inset)), .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area:not(:has(.review-content-inset)), #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-content-area:not(:has(.review-content-inset)), #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area:not(:has(.review-content-inset)), #reviews-content .cards-grid .review-card:not(.mobile-expanded) .review-content-area:not(:has(.review-content-inset)), #reviews-content .cards-grid .new-review-card:not(.mobile-expanded) .review-content-area:not(:has(.review-content-inset)) { padding-top: clamp(8px, 2.5vw, 10px) !important; padding-bottom: clamp(8px, 2.5vw, 10px) !important; padding-right: clamp(10px, 5vw, 12px) !important; padding-left: clamp(10px, 5vw, 12px) !important; } /* ============================================ STATE-BASED TYPOGRAPHY - Expanded State When cards are in single-card mode (.mobile-expanded) ============================================ */ /* Expanded state: Single card mode - larger fonts */ /* CRITICAL: Override normal state when cards are expanded */ .cards-grid > .mobile-expanded .review-title-text { font-size: clamp(1rem, 2.3vw, 1.15rem) !important; /* Responsive larger font size */ line-height: 1.3 !important; font-weight: 700 !important; margin-bottom: clamp(10px, 0.75em, 12px) !important; /* Responsive margin */ padding-top: clamp(6px, 0.5em, 8px) !important; /* Responsive padding */ padding-right: clamp(10px, 0.75em, 12px) !important; /* Responsive padding */ padding-left: clamp(10px, 0.75em, 12px) !important; /* Responsive padding */ } .cards-grid > .mobile-expanded .review-date-text { font-size: clamp(0.75rem, 0.95vw, 0.85rem) !important; /* Responsive font size */ font-weight: 500 !important; } /* CRITICAL: Responsive font-size for expanded review-text-content elements WITHOUT inline font-size */ /* This preserves Word formatting (elements with inline font-size are NOT affected) */ .cards-grid > .mobile-expanded .review-text-content > *:not([style*="font-size"]) { font-size: 1.1rem !important; /* Larger font size for better readability when expanded */ } .cards-grid > .mobile-expanded .review-text-content *:not([style*="font-size"]) { font-size: 1.1rem !important; /* Larger font size for better readability when expanded */ } .cards-grid > .mobile-expanded .review-text-content { line-height: var(--card-body-line-height-expanded, 1.7) !important; } /* Expanded state: Card body text - larger font */ .cards-grid > .mobile-expanded .card-body, .cards-grid > .mobile-expanded .card-text { font-size: var(--card-body-font-size-expanded, 1.2rem) !important; line-height: var(--card-body-line-height-expanded, 1.7) !important; } /* Expanded state: Card title - larger font */ .cards-grid > .mobile-expanded .card-title { font-size: 1.4rem !important; /* Larger than normal state for better readability */ line-height: 1.6 !important; font-weight: 600 !important; } } /* Tablet and larger - standard sizes */ @media (min-width: 769px) { /* Review title - standard desktop size */ .review-title-text { font-size: 1.1rem !important; /* Standard desktop size */ } /* Review date - standard desktop size */ .review-date-text { font-size: 0.8rem !important; /* Standard desktop size */ } } /* CRITICAL: Ensure footer stays at bottom - consolidated rules */ .review-footer { flex-shrink: 0 !important; flex-grow: 0 !important; margin-top: auto !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .review-interactions { font-size: 0.85rem; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; flex-shrink: 0 !important; } .review-interactions .btn { padding: 2px 6px; font-size: 0.75rem; border-radius: 4px; display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; } .review-date { color: #6c757d; font-size: 0.85rem; } .review-action-btn { background: transparent; color: inherit; border: 1px solid rgba(0, 0, 0, 0.15); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 400; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px; box-shadow: none; margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: middle !important; line-height: 1.2 !important; direction: ltr !important; text-align: left !important; unicode-bidi: embed !important; flex-shrink: 0 !important; flex-grow: 0 !important; width: auto !important; min-width: auto !important; min-height: auto !important; box-sizing: border-box !important; cursor: pointer; } .review-action-btn span { direction: ltr !important; text-align: left !important; unicode-bidi: embed !important; display: inline-block !important; vertical-align: middle !important; line-height: 1 !important; } .review-action-btn:hover { color: inherit; background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.25); transform: none; box-shadow: none; text-decoration: none; } /* Card Actions */ .card-actions { position: absolute; top: 12px; right: 12px; border-radius: 8px; padding: 4px; opacity: 0 !important; transition: opacity 0.3s ease; z-index: 100 !important; display: flex !important; gap: 4px; pointer-events: none !important; } /* ============================================ MOBILE CARD ACTIONS - Long-press & Menu ============================================ */ /* Mobile Menu Button (⋮) - Only visible when card is expanded */ .mobile-card-menu-button { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 1000 !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; display: none !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; transition: all 0.2s ease !important; color: #333 !important; font-size: 16px !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } /* CRITICAL: Override inline styles when card is expanded - highest specificity */ /* This rule applies at all screen sizes, but will be overridden by media queries for desktop */ .mobile-expanded .mobile-card-menu-button, .mobile-expanded > .mobile-card-menu-button, .cards-grid .mobile-expanded .mobile-card-menu-button, .cards-grid .mobile-expanded > .mobile-card-menu-button, #reviews-tab-pane .mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .mobile-expanded > .mobile-card-menu-button, #reviews-tab-pane .cards-grid .mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .cards-grid .mobile-expanded > .mobile-card-menu-button, #reviews-tab-pane .review-card.mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .new-review-card.mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .review-card.mobile-expanded > .mobile-card-menu-button, #reviews-tab-pane .new-review-card.mobile-expanded > .mobile-card-menu-button { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 1001 !important; /* Higher than card-actions z-index: 100 */ } .mobile-card-menu-button:hover, .mobile-card-menu-button:active { background: rgba(255, 255, 255, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transform: scale(1.05); } .mobile-card-menu-button i { color: #333; } /* Show menu button only when card is expanded on mobile */ /* CRITICAL: Match JavaScript mobile detection (max-width: 768px) */ @media (max-width: 768px) { /* CRITICAL: Maximum specificity selectors to ensure button shows on mobile */ .mobile-expanded .mobile-card-menu-button, .mobile-expanded > .mobile-card-menu-button, .cards-grid .mobile-expanded .mobile-card-menu-button, .cards-grid .mobile-expanded > .mobile-card-menu-button, #reviews-tab-pane .mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .mobile-expanded > .mobile-card-menu-button, #reviews-tab-pane .mobile-expanded .review-card .mobile-card-menu-button, #reviews-tab-pane .mobile-expanded .new-review-card .mobile-card-menu-button, #reviews-tab-pane .mobile-expanded .review-card > .mobile-card-menu-button, #reviews-tab-pane .mobile-expanded .new-review-card > .mobile-card-menu-button, #reviews-tab-pane .review-card.mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .new-review-card.mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .review-card.mobile-expanded > .mobile-card-menu-button, #reviews-tab-pane .new-review-card.mobile-expanded > .mobile-card-menu-button, #reviews-tab-pane .cards-grid .mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .cards-grid .mobile-expanded .review-card .mobile-card-menu-button, #reviews-tab-pane .cards-grid .mobile-expanded .new-review-card .mobile-card-menu-button, #reviews-tab-pane .position-relative .mobile-expanded .mobile-card-menu-button, #reviews-tab-pane .position-relative.mobile-expanded .mobile-card-menu-button, #studies-tab-pane .mobile-expanded .mobile-card-menu-button, #studies-tab-pane .mobile-expanded > .mobile-card-menu-button, #studies-tab-pane .mobile-expanded .unified-card .mobile-card-menu-button, #studies-tab-pane .mobile-expanded .study-card .mobile-card-menu-button, #studies-tab-pane .unified-card.mobile-expanded .mobile-card-menu-button, #studies-tab-pane .study-card.mobile-expanded .mobile-card-menu-button, #studies-tab-pane .cards-grid .mobile-expanded .mobile-card-menu-button, #studies-tab-pane .cards-grid .mobile-expanded .unified-card .mobile-card-menu-button, #studies-tab-pane .cards-grid .mobile-expanded .study-card .mobile-card-menu-button { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 1001 !important; /* Higher than card-actions z-index: 100 */ } } /* Hide menu button on desktop (hover shows card-actions instead) */ @media (min-width: 769px) { .mobile-card-menu-button { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* Mobile Menu Open State - Dropdown menu */ @media (max-width: 480px) { .mobile-expanded.mobile-menu-open .card-actions { position: absolute !important; top: 50px !important; right: 12px !important; z-index: 1002 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; background: white !important; border-radius: 8px !important; padding: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; opacity: 1 !important; pointer-events: auto !important; min-width: 120px !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } .mobile-expanded.mobile-menu-open .card-actions .btn { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; justify-content: flex-start !important; padding: 8px 12px !important; margin: 0 !important; border-radius: 6px !important; font-size: 0.875rem !important; } .mobile-expanded.mobile-menu-open .card-actions .btn i { margin-right: 8px !important; } } /* Review cards: prevent header link from capturing clicks when menu is open */ @media (max-width: 768px) { .review-card.mobile-menu-open > a.review-header-link, .new-review-card.mobile-menu-open > a.review-header-link, #reviews-tab-pane .review-card.mobile-menu-open > a.review-header-link, #reviews-tab-pane .new-review-card.mobile-menu-open > a.review-header-link { pointer-events: none !important; } } /* Review cards: ensure menu opens even if class is removed by other handlers */ @media (max-width: 768px) { .review-card[data-menu-open="true"] .card-actions, .new-review-card[data-menu-open="true"] .card-actions, #reviews-tab-pane .review-card[data-menu-open="true"] .card-actions, #reviews-tab-pane .new-review-card[data-menu-open="true"] .card-actions { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 1002 !important; } } /* Long-press: Show actions in grid state (not expanded) */ @media (max-width: 480px) { /* When long-press shows actions, they should be visible */ .card-actions[style*="opacity: 1"] { opacity: 1 !important; pointer-events: auto !important; display: flex !important; } } .review-card:hover .card-actions, .new-review-card:hover .card-actions { opacity: 1 !important; pointer-events: auto !important; } /* CRITICAL: Force edit button visible when parent is visible - override any Bootstrap modal hiding */ .new-review-card:hover .card-actions button[data-bs-toggle="modal"], .review-card:hover .card-actions button[data-bs-toggle="modal"], .new-review-card:hover .card-actions button[data-bs-target="#editReviewModal"], .review-card:hover .card-actions button[data-bs-target="#editReviewModal"] { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; min-width: 32px !important; min-height: 32px !important; padding: 4px 8px !important; border: 1px solid #0d6efd !important; border-width: 1px !important; border-style: solid !important; color: #0d6efd !important; background-color: transparent !important; position: relative !important; z-index: 103 !important; margin: 0 !important; flex-shrink: 0 !important; order: 1 !important; transform: none !important; } .card-actions .btn { padding: 4px 6px; margin: 0 2px; font-size: 0.75rem; border-radius: 4px; background-color: transparent !important; opacity: 1 !important; visibility: visible !important; display: inline-flex !important; } /* CRITICAL: Edit button - ensure it's always visible when parent is visible */ .card-actions .btn-outline-primary, .card-actions .edit-review-btn, .new-review-card .card-actions .edit-review-btn, .review-card .card-actions .edit-review-btn, .card-actions button.btn-outline-primary, .card-actions button.edit-review-btn, .new-review-card .card-actions button.edit-review-btn, .review-card .card-actions button.edit-review-btn, .new-review-card .card-actions .btn.btn-outline-primary, .review-card .card-actions .btn.btn-outline-primary, .new-review-card .card-actions .btn.btn-sm.btn-outline-primary, .review-card .card-actions .btn.btn-sm.btn-outline-primary, .new-review-card .card-actions button.btn.btn-sm.btn-outline-primary.edit-review-btn, .review-card .card-actions button.btn.btn-sm.btn-outline-primary.edit-review-btn { border-color: #0d6efd !important; border-width: 1px !important; border-style: solid !important; color: #0d6efd !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; background-color: transparent !important; width: auto !important; height: auto !important; min-width: 32px !important; min-height: 32px !important; padding: 4px 8px !important; margin: 0 !important; position: relative !important; z-index: 102 !important; flex-shrink: 0 !important; flex-grow: 0 !important; flex-basis: auto !important; order: 1 !important; transform: none !important; } /* When parent is visible on hover, edit button MUST be visible */ .review-card:hover .card-actions .btn-outline-primary, .new-review-card:hover .card-actions .btn-outline-primary, .review-card:hover .card-actions .edit-review-btn, .new-review-card:hover .card-actions .edit-review-btn, .review-card:hover .card-actions button.btn-outline-primary, .new-review-card:hover .card-actions button.btn-outline-primary, .review-card:hover .card-actions button.edit-review-btn, .new-review-card:hover .card-actions button.edit-review-btn { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* Ensure edit button icon is visible */ .card-actions .btn-outline-primary i, .card-actions .edit-review-btn i, .new-review-card .card-actions .edit-review-btn i, .review-card .card-actions .edit-review-btn i { color: #0d6efd !important; opacity: 1 !important; visibility: visible !important; } .card-actions .btn-outline-primary:hover, .card-actions .edit-review-btn:hover, .new-review-card:hover .card-actions .edit-review-btn:hover, .review-card:hover .card-actions .edit-review-btn:hover { background-color: #0d6efd !important; color: white !important; border-color: #0d6efd !important; opacity: 1 !important; } /* Ensure edit button icon is white on hover */ .card-actions .btn-outline-primary:hover i, .card-actions .edit-review-btn:hover i, .new-review-card:hover .card-actions .edit-review-btn:hover i, .review-card:hover .card-actions .edit-review-btn:hover i { color: white !important; opacity: 1 !important; } /* Delete button - keep existing styling but ensure visibility */ .card-actions .btn-outline-danger, .card-actions .delete-review { opacity: 1 !important; visibility: visible !important; display: inline-flex !important; } .card-actions .btn-outline-danger { border-color: #dc3545; color: #dc3545; } .card-actions .btn-outline-danger:hover { background-color: #dc3545 !important; color: white; } .review-content-preview { line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; direction: rtl; text-align: right; font-family: 'Crimson Text', 'Times New Roman', serif; font-size: 0.85rem; color: #6c757d; margin-bottom: 1rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; /* Remove leading whitespace */ text-indent: 0; margin-top: 0; padding-top: 0; } /* Remove leading whitespace from first paragraph */ .review-content-preview p:first-child { margin-top: 0; padding-top: 0; text-indent: 0; } /* Remove leading whitespace from all paragraphs */ .review-content-preview p { margin-top: 0.5rem; margin-bottom: 0.5rem; text-indent: 0; } /* Remove leading whitespace from divs */ .review-content-preview div { margin-top: 0; padding-top: 0; text-indent: 0; } .review-text { position: relative; min-height: 60px; } /* Review card dimensions are now handled by the unified card system in profile-components.css */ .review-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-color: rgba(102, 126, 234, 0.3); } /* Prevent layout breaking on hover */ .review-card { isolation: isolate; will-change: transform; } /* Review Card Top Section - Reduced Height for Better Content Display */ /* CRITICAL: For cards in grid, profile-grid-layout.css handles image sizing */ /* This rule only applies to review cards NOT in .cards-grid */ .review-card:not(.cards-grid > .review-card):not(.cards-grid > .new-review-card) .card-img-top { width: 100%; height: 190px !important; /* Reduced from 380px to about half */ min-height: 190px !important; max-height: 190px !important; border-radius: 0; transition: transform 0.3s ease; display: flex !important; flex-shrink: 0; align-items: center; justify-content: center; } .review-card:hover .card-img-top { transform: scale(1.02); } /* Review card body dimensions are now handled by the unified card system in profile-components.css */ .review-card .card-footer { background: #f8f9fa; border-top: 1px solid #dee2e6; padding: 0.75rem 1.25rem; margin-top: auto; } .review-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .review-title { font-size: 1rem; font-weight: 600; line-height: 1.3; color: #2c3e50; margin-bottom: 0.75rem; direction: rtl; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .review-actions { display: block; visibility: visible; } .see-full-review-btn, .footer-action { border-radius: 8px; font-size: 0.85rem; font-weight: 500; padding: 0.5rem 1rem; transition: all 0.3s ease; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white !important; text-decoration: none !important; display: inline-block; margin-top: 0.5rem; visibility: visible !important; opacity: 1 !important; position: relative; z-index: 1; } .see-full-review-btn:hover, .footer-action:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); color: white !important; text-decoration: none !important; } /* Review action button - outline style matching footer interaction buttons */ .review-action-btn { background: transparent !important; color: inherit !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; padding: 0.25rem 0.5rem !important; border-radius: 4px !important; font-size: 0.75rem !important; font-weight: 400 !important; text-decoration: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; box-shadow: none !important; white-space: nowrap !important; flex-shrink: 0 !important; flex-grow: 0 !important; max-width: fit-content !important; width: auto !important; min-width: auto !important; min-height: auto !important; line-height: 1.2 !important; box-sizing: border-box !important; cursor: pointer !important; } .review-action-btn:hover { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.25) !important; color: inherit !important; transform: none !important; box-shadow: none !important; text-decoration: none !important; } .review-action-btn i { font-size: 0.875rem !important; line-height: 1 !important; } .review-actions { border-top: 1px solid #f8f9fa; padding-top: 0.75rem; margin-top: auto; display: block !important; visibility: visible !important; } /* Ensure proper RTL support for Persian text */ [data-multilingual="true"] { direction: rtl; text-align: right; } /* Fix for long Persian text */ .review-content { word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; } /* Grid Layout - Let Bootstrap handle the grid layout - don't override */ /* Responsive Review Card Top Section Heights */ @media (max-width: 992px) { .review-card .card-img-top { height: 120px !important; /* Reduced proportionally */ min-height: 120px !important; max-height: 120px !important; } } @media (max-width: 768px) { .review-card .card-img-top { height: 107px !important; /* Reduced proportionally */ min-height: 107px !important; max-height: 107px !important; } } @media (max-width: 576px) { .review-card .card-img-top { height: 94px !important; /* Reduced proportionally */ min-height: 94px !important; max-height: 94px !important; } } @media (max-width: 1200px) { /* Let Bootstrap handle responsive grid */ } @media (max-width: 768px) { .review-card { min-height: 280px; max-height: 350px; } .review-content-preview { -webkit-line-clamp: 3; font-size: 0.8rem; } .review-title { font-size: 0.95rem; margin-bottom: 0.5rem; } .review-card .card-body { padding: 1rem; } .review-card .card-footer { padding: 0 1rem 1rem; } /* Responsive footer for mobile */ .review-footer { padding: clamp(3px, 0.25em, 4px) clamp(10px, 0.75em, 12px) !important; /* Responsive padding */ gap: clamp(6px, 0.5em, 8px) !important; /* Responsive gap */ margin-bottom: 0 !important; } /* Adjust spacing on mobile */ .review-card:not(.mobile-expanded) .review-content-area, .new-review-card:not(.mobile-expanded) .review-content-area { padding: 12px 12px 10px 12px !important; } .review-card:not(.mobile-expanded) .review-text-content, .new-review-card:not(.mobile-expanded) .review-text-content { -webkit-line-clamp: 7 !important; max-height: calc(1.7 * 0.95rem * 7) !important; } .review-interactions .btn, .review-footer > .btn, .review-footer .btn-outline-secondary, .review-footer .btn-sm { padding: clamp(3px, 0.25em, 4px) clamp(6px, 0.5em, 8px) !important; /* Responsive padding */ font-size: clamp(0.65rem, 0.8vw, 0.7rem) !important; /* Responsive font size */ } /* Responsive like/comment count spans on mobile */ .review-footer .btn-outline-secondary > span, .review-footer .btn-sm > span, .review-footer > .btn > span, .review-footer span[id*="likeCount"], .review-footer span[id*="commentCount"] { font-size: clamp(0.65rem, 0.8vw, 0.7rem) !important; /* Responsive font size */ } /* Responsive icons on mobile */ .review-footer .btn-outline-secondary i, .review-footer .btn-sm i, .review-footer > .btn i { font-size: clamp(0.65rem, 0.8vw, 0.7rem) !important; /* Responsive icon size */ } .review-action-btn { padding: clamp(3px, 0.25em, 4px) clamp(6px, 0.5em, 8px) !important; min-width: auto !important; min-height: auto !important; } .review-action-btn i { font-size: clamp(0.65rem, 0.8vw, 0.7rem) !important; } } @media (max-width: 576px) { /* Responsive footer for small mobile */ .review-footer { padding: clamp(2px, 0.2em, 3px) clamp(8px, 0.7em, 10px) !important; /* Responsive padding */ gap: clamp(4px, 0.4em, 6px) !important; /* Responsive gap */ margin-bottom: 0 !important; } /* Adjust spacing on small mobile */ .review-card:not(.mobile-expanded) .review-content-area, .new-review-card:not(.mobile-expanded) .review-content-area { padding: clamp(8px, 0.7em, 10px) clamp(8px, 0.7em, 10px) clamp(6px, 0.6em, 8px) clamp(8px, 0.7em, 10px) !important; /* Responsive padding */ } .review-card:not(.mobile-expanded) .review-text-content, .new-review-card:not(.mobile-expanded) .review-text-content { -webkit-line-clamp: 6 !important; max-height: calc(1.7 * 0.95rem * 6) !important; } .review-interactions .btn, .review-footer > .btn, .review-footer .btn-outline-secondary, .review-footer .btn-sm { padding: clamp(2px, 0.2em, 3px) clamp(5px, 0.45em, 6px) !important; /* Responsive padding */ font-size: clamp(0.6rem, 0.75vw, 0.65rem) !important; /* Responsive font size */ } /* Responsive like/comment count spans on small mobile */ .review-footer .btn-outline-secondary > span, .review-footer .btn-sm > span, .review-footer > .btn > span, .review-footer span[id*="likeCount"], .review-footer span[id*="commentCount"] { font-size: clamp(0.6rem, 0.75vw, 0.65rem) !important; /* Responsive font size */ } /* Responsive icons on small mobile */ .review-footer .btn-outline-secondary i, .review-footer .btn-sm i, .review-footer > .btn i { font-size: clamp(0.6rem, 0.75vw, 0.65rem) !important; /* Responsive icon size */ } .review-action-btn { padding: clamp(2px, 0.2em, 3px) clamp(5px, 0.45em, 6px) !important; min-width: auto !important; min-height: auto !important; } .review-action-btn i { font-size: clamp(0.6rem, 0.75vw, 0.65rem) !important; } } /* Review cards should be handled by profile-components.css - remove conflicting rules */ /* Remove borders from review footer buttons (like/comment counts) */ .review-footer .btn-outline-secondary { border: none !important; box-shadow: none !important; } /* CRITICAL: Responsive base styles for review footer buttons */ .review-footer .btn-outline-secondary, .review-footer .btn-sm, .review-footer > .btn { font-size: clamp(0.7rem, 0.85vw, 0.875rem) !important; /* Responsive font size */ padding: clamp(4px, 0.3em, 6px) clamp(8px, 0.6em, 12px) !important; /* Responsive padding */ line-height: 1.4 !important; } /* CRITICAL: Responsive styles for like/comment count spans inside buttons */ .review-footer .btn-outline-secondary > span, .review-footer .btn-sm > span, .review-footer > .btn > span, .review-footer span[id*="likeCount"], .review-footer span[id*="commentCount"] { font-size: clamp(0.7rem, 0.85vw, 0.875rem) !important; /* Responsive font size - matches button */ line-height: 1.4 !important; display: inline-block !important; } /* CRITICAL: Responsive styles for icons inside review footer buttons */ .review-footer .btn-outline-secondary i, .review-footer .btn-sm i, .review-footer > .btn i { font-size: clamp(0.7rem, 0.85vw, 0.875rem) !important; /* Responsive icon size */ } /* CRITICAL: Responsive base styles for review footer container */ .review-footer { padding: clamp(4px, 0.3em, 6px) clamp(10px, 0.75em, 12px) !important; /* Responsive padding */ gap: clamp(6px, 0.5em, 8px) !important; /* Responsive gap */ } /* Simplified publication review cards (details page) */ .simple-review-card { border: 1px solid #e9ecef; border-radius: 14px; padding: 20px; background: #ffffff; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); transition: transform .2s ease, box-shadow .2s ease; min-height: 180px; display: flex; flex-direction: column; gap: 1.25rem; position: relative; } .simple-review-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); } .simple-review-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 0.5rem; } .simple-review-title { font-size: 1.05rem; font-weight: 600; color: #1f2937; line-height: 1.5; margin: 0; } .simple-review-meta { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; } .simple-review-username-link, .simple-review-username-text { font-size: 0.95rem; font-weight: 600; color: #2563eb; text-decoration: none; word-break: break-word; } .simple-review-username-link:hover, .simple-review-username-link:focus { color: #1d4ed8; text-decoration: underline; } @media (max-width: 576px) { .simple-review-card { padding: 18px; min-height: 160px; } } /* Dark mode: recent-reviews-list and simple-review-card follow system/class preference */ @media (prefers-color-scheme: dark) { .recent-reviews-list { color: #f1f5f9; } .recent-reviews-list .simple-review-card, .simple-review-card { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } .recent-reviews-list .simple-review-card:hover, .simple-review-card:hover { background-color: #334155 !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); } .recent-reviews-list .simple-review-label, .simple-review-label { color: #94a3b8 !important; } .recent-reviews-list .simple-review-title, .reviews-of-my-books-section .simple-review-card .simple-review-title, .simple-review-title { color: #f1f5f9 !important; } .recent-reviews-list .simple-review-username-link, .recent-reviews-list .simple-review-username-text, .reviews-of-my-books-section .simple-review-username-link, .reviews-of-my-books-section .simple-review-username-text, .simple-review-username-link, .simple-review-username-text { color: #60a5fa !important; } .recent-reviews-list .simple-review-username-link:hover, .recent-reviews-list .simple-review-username-link:focus, .simple-review-username-link:hover, .simple-review-username-link:focus { color: #93c5fd !important; } .reviews-of-my-books-section .section-title { color: #f1f5f9 !important; } .reviews-of-my-books-section .no-reviews-message .text-muted, .reviews-of-my-books-section .no-reviews-message h6.text-muted, .reviews-of-my-books-section .no-reviews-message p.text-muted, .no-reviews-message .text-muted, .no-reviews-message h6.text-muted, .no-reviews-message p.text-muted { color: #94a3b8 !important; } } html.color-scheme-dark .recent-reviews-list, html.color-scheme-dark .recent-reviews-list .simple-review-card, html.color-scheme-dark .simple-review-card { color: #f1f5f9 !important; } html.color-scheme-dark .recent-reviews-list .simple-review-card, html.color-scheme-dark .simple-review-card { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } html.color-scheme-dark .recent-reviews-list .simple-review-card:hover, html.color-scheme-dark .simple-review-card:hover { background-color: #334155 !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); } html.color-scheme-dark .recent-reviews-list .simple-review-label, html.color-scheme-dark .simple-review-label { color: #94a3b8 !important; } html.color-scheme-dark .recent-reviews-list .simple-review-title, html.color-scheme-dark .reviews-of-my-books-section .simple-review-card .simple-review-title, html.color-scheme-dark .simple-review-title { color: #f1f5f9 !important; } html.color-scheme-dark .recent-reviews-list .simple-review-username-link, html.color-scheme-dark .recent-reviews-list .simple-review-username-text, html.color-scheme-dark .reviews-of-my-books-section .simple-review-username-link, html.color-scheme-dark .reviews-of-my-books-section .simple-review-username-text, html.color-scheme-dark .simple-review-username-link, html.color-scheme-dark .simple-review-username-text { color: #60a5fa !important; } html.color-scheme-dark .recent-reviews-list .simple-review-username-link:hover, html.color-scheme-dark .recent-reviews-list .simple-review-username-link:focus, html.color-scheme-dark .simple-review-username-link:hover, html.color-scheme-dark .simple-review-username-link:focus { color: #93c5fd !important; } html.color-scheme-dark .reviews-of-my-books-section .section-title { color: #f1f5f9 !important; } html.color-scheme-dark .reviews-of-my-books-section .no-reviews-message .text-muted, html.color-scheme-dark .reviews-of-my-books-section .no-reviews-message h6.text-muted, html.color-scheme-dark .reviews-of-my-books-section .no-reviews-message p.text-muted, html.color-scheme-dark .no-reviews-message .text-muted, html.color-scheme-dark .no-reviews-message h6.text-muted, html.color-scheme-dark .no-reviews-message p.text-muted { color: #94a3b8 !important; } /* Unified cards-grid review footer sizing (match card-core on mobile) */ @media (max-width: 768px) { .cards-grid .review-footer, .cards-grid .new-review-card .review-footer { padding: var(--card-footer-padding, 8px 16px) !important; gap: clamp(4px, 1vw, 6px) !important; } .cards-grid .review-footer .btn, .cards-grid .review-footer .btn-sm, .cards-grid .review-footer span.btn { min-width: clamp(28px, 8vw, 36px) !important; min-height: clamp(28px, 8vw, 36px) !important; padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 8px) !important; font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important; line-height: 1.2 !important; } .cards-grid .review-footer .btn i, .cards-grid .review-footer .btn-sm i { font-size: clamp(0.6rem, 1.6vw, 0.7rem) !important; width: clamp(8px, 2vw, 10px) !important; height: clamp(8px, 2vw, 10px) !important; } .cards-grid .review-footer .btn span, .cards-grid .review-footer .btn-sm span { font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important; line-height: 1.2 !important; } } /* Normalize review cards to unified card metrics — desktop/tablet only. Mobile inset is handled in the profile phone grid block at end of file. */ @media (min-width: 769px) { .cards-grid .review-card .review-content-area:not(:has(.review-content-inset)), .cards-grid .new-review-card .review-content-area:not(:has(.review-content-inset)) { overflow: hidden !important; padding: var(--card-body-padding-publication, var(--card-content-padding)) !important; } .cards-grid .review-card .review-content-inset, .cards-grid .new-review-card .review-content-inset { padding: var(--card-body-padding-publication, var(--card-content-padding)) !important; } .cards-grid .review-card .review-header:not(:has(.review-header-inset)), .cards-grid .new-review-card .review-header:not(:has(.review-header-inset)), .cards-grid .review-card > a.review-header-link > .review-header:not(:has(.review-header-inset)), .cards-grid .new-review-card > a.review-header-link > .review-header:not(:has(.review-header-inset)), .cards-grid .review-card > .position-relative > .review-header:not(:has(.review-header-inset)), .cards-grid .new-review-card > .position-relative > .review-header:not(:has(.review-header-inset)) { padding: var(--card-header-padding, 20px) !important; } .cards-grid .review-card .review-header-inset, .cards-grid .new-review-card .review-header-inset { padding: var(--card-header-padding, 20px) !important; } } .cards-grid .review-card .review-footer, .cards-grid .new-review-card .review-footer { padding: var(--card-footer-padding-y, 8px) var(--card-footer-padding-x, clamp(10px, 3vw, 16px)) !important; gap: 0 !important; min-height: var(--card-footer-min-height, 2.5rem) !important; justify-content: center !important; overflow: visible !important; } .cards-grid .review-card .review-footer .btn, .cards-grid .new-review-card .review-footer .btn, .cards-grid .review-card .review-footer .btn-sm, .cards-grid .new-review-card .review-footer .btn-sm, .cards-grid .review-card .review-footer span.btn, .cards-grid .new-review-card .review-footer span.btn { padding: 0.25rem 0.5rem !important; font-size: 0.875rem !important; line-height: 1.2 !important; min-width: auto !important; min-height: auto !important; } .cards-grid .review-card .review-footer .btn i, .cards-grid .new-review-card .review-footer .btn i, .cards-grid .review-card .review-footer .btn-sm i, .cards-grid .new-review-card .review-footer .btn-sm i { font-size: 0.875rem !important; width: auto !important; height: auto !important; } .cards-grid .review-card .review-footer .review-action-btn, .cards-grid .new-review-card .review-footer .review-action-btn { background: transparent !important; color: inherit !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; box-shadow: none !important; padding: 0.25rem 0.5rem !important; font-size: 0.875rem !important; line-height: 1.2 !important; min-width: auto !important; min-height: auto !important; border-radius: 4px !important; margin-left: 0 !important; margin-right: 0 !important; cursor: pointer !important; text-decoration: none !important; } .cards-grid .review-card .review-footer .review-action-btn i, .cards-grid .new-review-card .review-footer .review-action-btn i { font-size: 0.875rem !important; width: auto !important; height: auto !important; } /* Normalize header content so all cards have same visual dimensions (Profile + Explore). Title must not grow (flex: 0 1 auto) and use fixed margin so clamp/em don't vary by card. */ .cards-grid .review-header .review-title-text, .cards-grid .new-review-card .review-header .review-title-text { flex: 0 1 auto !important; margin-bottom: 8px !important; } /* Reserve same space for link area so cards with/without link look aligned */ .cards-grid .review-header .review-link-container { margin-top: auto !important; padding-bottom: 8px !important; min-height: 32px !important; display: flex !important; align-items: center !important; } /* ============================================ Expanded reviews (Profile + Explore) - size normalization ============================================ */ /* Hide actions in expanded state so they don't affect layout */ .mobile-expanded.review-card .card-actions, .mobile-expanded.new-review-card .card-actions, #exploreFeed .explore-card.mobile-expanded .card-actions, #exploreFeed .explore-card-wrapper.mobile-expanded .card-actions { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } /* Expanded header/body/footer: unified padding/typography even outside .cards-grid */ .mobile-expanded.review-card .review-header, .mobile-expanded.new-review-card .review-header { padding: var(--card-header-padding, 20px) !important; } .mobile-expanded.review-card .review-content-area, .mobile-expanded.new-review-card .review-content-area { padding: var(--card-body-padding-expanded, var(--card-content-padding, 16px)) !important; overflow: hidden !important; font-size: var(--card-body-font-size-expanded, 1.2rem) !important; line-height: var(--card-body-line-height-expanded, 1.7) !important; } .mobile-expanded.review-card .review-text-content, .mobile-expanded.new-review-card .review-text-content { font-size: var(--card-body-font-size-expanded, 1.2rem) !important; line-height: var(--card-body-line-height-expanded, 1.7) !important; -webkit-line-clamp: unset !important; white-space: normal !important; overflow: visible !important; } .mobile-expanded.review-card .review-text-content *, .mobile-expanded.new-review-card .review-text-content * { font-size: inherit !important; line-height: inherit !important; } .mobile-expanded.review-card .review-footer, .mobile-expanded.new-review-card .review-footer { padding: var(--card-footer-padding, 8px 16px) !important; min-height: var(--card-footer-expanded-min-height, var(--card-footer-min-height, 40px)) !important; gap: 12px !important; } /* Override mobile footer/text clamps for reviews to match publication/study */ @media (max-width: 768px) { .cards-grid .review-card:not(.mobile-expanded) .review-footer, .cards-grid .new-review-card:not(.mobile-expanded) .review-footer { min-height: var(--card-footer-min-height, 2.5rem) !important; align-items: center !important; overflow: hidden !important; padding: 4px clamp(4px, 2vw, 8px) !important; } .cards-grid .review-card:not(.mobile-expanded) .review-footer > .d-flex, .cards-grid .new-review-card:not(.mobile-expanded) .review-footer > .d-flex, .cards-grid .review-card:not(.mobile-expanded) .review-footer > .review-footer-actions, .cards-grid .new-review-card:not(.mobile-expanded) .review-footer > .review-footer-actions { align-items: center !important; flex-shrink: 1 !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; overflow: hidden !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; justify-items: center !important; gap: 2px !important; } .cards-grid .review-card:not(.mobile-expanded) .review-footer .review-action-btn, .cards-grid .new-review-card:not(.mobile-expanded) .review-footer .review-action-btn, .cards-grid .review-card:not(.mobile-expanded) .review-footer .review-footer-stat, .cards-grid .new-review-card:not(.mobile-expanded) .review-footer .review-footer-stat { padding: 2px 3px !important; min-width: 0 !important; max-width: 100% !important; flex-shrink: 1 !important; box-sizing: border-box !important; line-height: 1.1 !important; font-size: clamp(0.55rem, 2.4vw, 0.65rem) !important; justify-content: center !important; overflow: hidden !important; } .cards-grid .review-card:not(.mobile-expanded) .review-footer .review-action-btn, .cards-grid .new-review-card:not(.mobile-expanded) .review-footer .review-action-btn { cursor: pointer !important; } .cards-grid .review-card:not(.mobile-expanded) .review-footer .review-action-btn i, .cards-grid .new-review-card:not(.mobile-expanded) .review-footer .review-action-btn i, .cards-grid .review-card:not(.mobile-expanded) .review-footer .review-footer-stat i, .cards-grid .new-review-card:not(.mobile-expanded) .review-footer .review-footer-stat i { font-size: clamp(0.55rem, 2.4vw, 0.65rem) !important; width: auto !important; height: auto !important; margin: 0 1px 0 0 !important; } .cards-grid .review-footer, .cards-grid .new-review-card .review-footer { padding: var(--card-footer-padding-y, 8px) var(--card-footer-padding-x, clamp(10px, 3vw, 16px)) !important; gap: 0 !important; } .cards-grid .review-card .review-footer > .review-footer-actions, .cards-grid .new-review-card .review-footer > .review-footer-actions, .cards-grid .review-card .review-footer > .d-flex, .cards-grid .new-review-card .review-footer > .d-flex { justify-content: space-between !important; gap: clamp(4px, 2vw, 12px) !important; } .cards-grid .review-footer .btn, .cards-grid .review-footer .btn-sm, .cards-grid .review-footer span.btn { padding: 2px 3px !important; font-size: clamp(0.55rem, 2.4vw, 0.65rem) !important; line-height: 1.1 !important; min-width: 0 !important; max-width: 100% !important; min-height: auto !important; } .cards-grid .review-footer .btn i, .cards-grid .review-footer .btn-sm i { font-size: clamp(0.55rem, 2.4vw, 0.65rem) !important; width: auto !important; height: auto !important; } #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-footer .review-action-btn, #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-footer .review-footer-stat, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-footer .review-action-btn, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-footer .review-footer-stat, #reviews-list .review-footer .review-action-btn, #reviews-list .review-footer .review-footer-stat { max-width: 100% !important; width: auto !important; } } /* Profile reviews tab: override fit-content footer buttons that clip on narrow 3-col cards */ @media (max-width: 768px) { #reviews-list.cards-grid .review-footer .review-action-btn, #reviews-list.cards-grid .review-footer .review-footer-stat, #reviews-content #reviews-list.cards-grid .review-footer .review-action-btn, #reviews-content #reviews-list.cards-grid .review-footer .review-footer-stat, #reviews-list .review-footer .review-action-btn, #reviews-list .review-footer .review-footer-stat { max-width: 100% !important; width: auto !important; } } /* ============================================ PROFILE PHONE GRID — final inset fix (LTR + RTL) Applies to ALL existing review cards in the DOM, not only new ones. Must stay last so it wins over card-layout + normalization rules. Uses physical padding-right/left (page is LTR; titles/body are often RTL). ============================================ */ @media (max-width: 768px) { #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded), #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded), #reviews-tab-pane #reviews-list.cards-grid .new-review-card:not(.mobile-expanded), #reviews-tab-pane #reviews-list .cards-grid .new-review-card:not(.mobile-expanded), #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded), #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded), #reviews-content #reviews-list.cards-grid .new-review-card:not(.mobile-expanded), #reviews-content #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) { overflow: hidden !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) > .position-relative, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) > .position-relative, #reviews-tab-pane #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) > .position-relative, #reviews-tab-pane #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative, #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) > .review-content-area, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) > .review-content-area, #reviews-tab-pane #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) > .review-content-area, #reviews-tab-pane #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) > .review-content-area, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) > .position-relative, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) > .position-relative, #reviews-content #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) > .position-relative, #reviews-content #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) > .review-content-area, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) > .review-content-area, #reviews-content #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) > .review-content-area, #reviews-content #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) > .review-content-area { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-tab-pane #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-tab-pane #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-content #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-content #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-list.cards-grid > .new-review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-list > .review-card:not(.mobile-expanded) > .position-relative > .review-header, #reviews-list > .new-review-card:not(.mobile-expanded) > .position-relative > .review-header { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; padding: 0 !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-header-inset, #reviews-list > .review-card:not(.mobile-expanded) .review-header-inset, .cards-grid .review-card:not(.mobile-expanded) .review-header-inset, .cards-grid .new-review-card:not(.mobile-expanded) .review-header-inset { box-sizing: border-box !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-inline: clamp(10px, 4vw, 14px) !important; padding-top: 10px !important; padding-bottom: 12px !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-title-text, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-title-text, #reviews-tab-pane #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) .review-title-text, #reviews-tab-pane #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) .review-title-text, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-title-text, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-title-text, #reviews-content #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) .review-title-text, #reviews-content #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) .review-title-text, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-title-text, #reviews-list.cards-grid > .new-review-card:not(.mobile-expanded) .review-title-text, #reviews-list > .review-card:not(.mobile-expanded) .review-title-text, #reviews-list > .new-review-card:not(.mobile-expanded) .review-title-text, .cards-grid .review-card:not(.mobile-expanded) .review-title-text, .cards-grid .new-review-card:not(.mobile-expanded) .review-title-text { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 2px 0 0 !important; display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; max-height: calc(1.4em * 2.05) !important; box-sizing: border-box !important; overflow: hidden !important; align-self: auto !important; flex: 0 1 auto !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-date-header, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-date-header, #reviews-tab-pane #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) .review-date-header, #reviews-tab-pane #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) .review-date-header, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-date-header, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-date-header, #reviews-content #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) .review-date-header, #reviews-content #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) .review-date-header { left: 0 !important; right: auto !important; inset-inline-start: 0 !important; bottom: 0 !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-content-area, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-content-area, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-content-area, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-content-area, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) > .review-content-area, #reviews-list > .review-card:not(.mobile-expanded) > .review-content-area { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; padding: 0 !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-content-inset, #reviews-list > .review-card:not(.mobile-expanded) .review-content-inset, .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, .cards-grid .new-review-card:not(.mobile-expanded) .review-content-inset { box-sizing: border-box !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-inline: clamp(10px, 4vw, 14px) !important; padding-top: clamp(8px, 2.5vw, 12px) !important; padding-bottom: clamp(8px, 2.5vw, 12px) !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-text-content, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-text-content, #reviews-tab-pane #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) .review-text-content, #reviews-tab-pane #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-text-content, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-text-content, #reviews-content #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) .review-text-content, #reviews-content #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content, .cards-grid .review-card:not(.mobile-expanded) .review-text-content, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content, .cards-grid .review-card:not(.mobile-expanded) .review-text-content.review-text-preview, .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content.review-text-preview { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; align-self: auto !important; flex: 0 1 auto !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-text-content p, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-text-content p, #reviews-tab-pane #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) .review-text-content p, #reviews-tab-pane #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content p, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-text-content p, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-text-content p, #reviews-content #reviews-list.cards-grid .new-review-card:not(.mobile-expanded) .review-text-content p, #reviews-content #reviews-list .cards-grid .new-review-card:not(.mobile-expanded) .review-text-content p { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-wrap: anywhere !important; word-break: break-word !important; } } @media (max-width: 480px) { #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-header-inset, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-header-inset, #reviews-list > .review-card:not(.mobile-expanded) .review-header-inset, .cards-grid .review-card:not(.mobile-expanded) .review-header-inset, .cards-grid .new-review-card:not(.mobile-expanded) .review-header-inset { margin-inline: clamp(10px, 5vw, 12px) !important; padding-left: 0 !important; padding-right: 0 !important; } #reviews-tab-pane #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-tab-pane #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-content #reviews-list.cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-content #reviews-list .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, #reviews-list.cards-grid > .review-card:not(.mobile-expanded) .review-content-inset, #reviews-list > .review-card:not(.mobile-expanded) .review-content-inset, .cards-grid .review-card:not(.mobile-expanded) .review-content-inset, .cards-grid .new-review-card:not(.mobile-expanded) .review-content-inset { margin-inline: clamp(10px, 5vw, 12px) !important; padding-left: 0 !important; padding-right: 0 !important; } }