/* ================================
   Reviewer Engine – Global Styles
   ================================ */

.dd-reviewer-container {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 36px 42px;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    background: #fff;
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;
    margin: 18px auto;
    font-family: "Inter", Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: padding 180ms ease, box-shadow 180ms ease;
}

/* Header */
.dd-reviewer-header-title {
    font-size: 28px;
    font-weight: 800;
    color: #0f1720;
    margin-bottom: 6px;
}

.dd-reviewer-header-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 8px;
}

/* Semantic heading styles */
.dd-reviewer-header-title, .dd-reviewer-header-title h2, h2.dd-reviewer-header-title { font-size: 28px; font-weight: 800; margin: 0 0 6px 0; }
.dd-reviewer-legal-review-title, .dd-reviewer-legal-review-title h3, h3.dd-reviewer-legal-review-title { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; }
.dd-reviewer-highlights-title, .dd-reviewer-highlights-title h4, h4.dd-reviewer-highlights-title { font-size: 16px; font-weight: 700; margin: 12px 0 8px 0; color: #0f2a3a; }

/* Reviewer Profile Section — horizontal layout */
.dd-reviewer-profile {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-top: 12px;
}

.dd-reviewer-photo {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid #fafafa;
    box-shadow: 0 6px 22px rgba(15,23,32,0.06);
    flex-shrink: 0;
}

.dd-reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dd-reviewer-name {
    font-size: 20px;
    font-weight: 800;
    color: #2a7ae2; /* accent blue like reference */
}

.dd-reviewer-title {
    font-size: 16px;
    color: #222;
    font-weight: 600;
}

.dd-reviewer-firm {
    font-size: 15px;
    color: #444;
}

/* Legal review title */
.dd-reviewer-legal-review-title {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-top: 6px;
}

/* Summary bullets */
.dd-reviewer-summary {
    margin-top: 12px;
    padding-left: 30px;
}

.dd-reviewer-summary li {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 8px;
}

/* Highlights */
.dd-reviewer-highlights-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f2a3a;
    margin-top: 18px;
}

.dd-reviewer-highlights li {
    font-size: 15px;
    color: #333;
    margin-bottom: 8px;
}

/* Last Reviewed aligned to right like reference */
.dd-reviewer-last-reviewed {
    font-size: 14px;
    color: #666;
    margin-top: 18px;
    text-align: right;
    font-style: italic;
}

/* New layout styles for two-column main area */
.dd-divider { border: none; border-top: 1px solid #e6e6e6; margin: 18px 0; }

/* Desktop: two-column with fixed photo column on left */
.dd-main { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.dd-photo-col { display: flex; justify-content: flex-start; align-items: flex-start; }
.dd-content-col { display: block; }

.dd-reviewer-photo {
    width: 200px;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid #fafafa;
    box-shadow: 0 6px 22px rgba(15,23,32,0.06);
}

.dd-reviewer-text p { margin: 10px 0; font-size: 16px; color: #333; line-height: 1.7; }

/* Speaking header and subtext above */
.dd-reviewer-header { padding-bottom: 6px; }

/* Ensure last reviewed sits on the right */
.dd-reviewer-last-reviewed { text-align: right; font-size: 14px; color: #666; font-style: italic; }

/* Strengthen layout specificity to survive CMS overrides and narrow preview panes */
.dd-reviewer-container .dd-main { 
  /* keep grid as fallback but prefer flex when there's room */
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  gap: 28px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

/* Photo column and content column should never collapse due to host css */
.dd-reviewer-container .dd-photo-col {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  flex: 0 0 200px !important;
  min-width: 200px !important;
}

.dd-reviewer-container .dd-content-col {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 280px !important;
}

/* Make image rendering robust: block-level, fixed display size on desktop but never overflow */
.dd-reviewer-container img.dd-reviewer-photo,
.dd-reviewer-container .dd-reviewer-photo {
  display: block !important;
  width: 200px !important;
  height: 200px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 22px rgba(15,23,32,0.06) !important;
  border: 6px solid #fafafa !important;
}

/* If viewport gives enough room, use flex layout to ensure side-by-side */
@media (min-width: 760px) {
  .dd-reviewer-container .dd-main {
    display: flex !important;
    flex-direction: row !important;
    gap: 28px !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }
}

/* Responsive: stack columns on narrow viewports */
@media (max-width: 760px) {
    .dd-reviewer-container .dd-main { 
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
    
    .dd-reviewer-container .dd-photo-col { 
        order: -1 !important;
        justify-content: center !important;
        flex: none !important;
        min-width: auto !important;
        width: 100% !important;
    }
    
    .dd-reviewer-container .dd-content-col {
        width: 100% !important;
        min-width: auto !important;
    }
    
    .dd-reviewer-container .dd-reviewer-photo { 
        width: 140px !important;
        height: 140px !important;
    }
    
    .dd-reviewer-header-title { font-size: 22px; text-align: center; }
    .dd-reviewer-header-desc { font-size: 15px; text-align: center; }
    .dd-reviewer-legal-review-title { font-size: 18px; text-align: center; }
    
    .dd-reviewer-text { text-align: left; }
    
    .dd-reviewer-last-reviewed {
        text-align: center !important;
    }
}

@media (max-width: 640px) {
    .dd-reviewer-container {
        padding: 20px;
        margin: 12px auto;
    }

    .dd-reviewer-profile {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .dd-reviewer-photo {
        width: 110px;
        height: 110px;
    }

    .dd-reviewer-name { font-size: 18px; }
    .dd-reviewer-title { font-size: 14px; }
    .dd-reviewer-firm { font-size: 13px; }

    .dd-reviewer-last-reviewed {
        text-align: center;
        font-size: 13px;
        font-style: normal;
        color: #666;
    }
}

/* ==================
   Responsive Rules
   ==================
   These rules improve layout and readability on narrow viewports
*/

/* Small tablets and large phones */
@media (max-width: 640px) {
    .dd-reviewer-container {
        padding: 18px !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        gap: 16px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    }

    .dd-reviewer-header-title {
        font-size: 20px !important;
        text-align: center !important;
    }

    .dd-reviewer-header-desc {
        font-size: 14px !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    .dd-reviewer-legal-review-title {
        font-size: 17px !important;
        text-align: center !important;
    }

    .dd-reviewer-container .dd-reviewer-photo {
        width: 120px !important;
        height: 120px !important;
    }

    .dd-reviewer-text p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .dd-reviewer-highlights-title {
        font-size: 16px !important;
        text-align: center !important;
    }

    .dd-reviewer-highlights {
        padding-left: 20px !important;
    }

    .dd-reviewer-highlights li {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
        background: #f9f9f9 !important;
        padding: 10px 12px !important;
        border-radius: 6px !important;
    }

    .dd-reviewer-last-reviewed {
        text-align: center !important;
        font-size: 13px !important;
    }
}

/* Narrow phones (good default mobile experience) */
@media (max-width: 420px) {
    .dd-reviewer-container {
        padding: 14px !important;
        margin: 8px !important;
        gap: 14px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
        border-radius: 6px !important;
    }

    .dd-reviewer-header-title { 
        font-size: 18px !important;
    }
    
    .dd-reviewer-header-desc { 
        font-size: 13px !important;
    }

    .dd-reviewer-container .dd-reviewer-photo { 
        width: 100px !important;
        height: 100px !important;
    }

    .dd-reviewer-legal-review-title {
        font-size: 16px !important;
    }

    .dd-reviewer-text p {
        font-size: 14px !important;
    }

    .dd-reviewer-highlights li {
        font-size: 13px !important;
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
    }

    .dd-reviewer-last-reviewed {
        font-size: 12px !important;
    }
}