/**
 * Mintly Sessions - Stylesheet
 * 
 * Design: 1:1 match with Figma Mintly Mini-sessions
 * Fonts: Tobias + Cerebri Sans Pro
 */

/* ============================================
   Font Imports
   ============================================ */
@import url('https://fonts.cdnfonts.com/css/cerebri-sans');

/* ============================================
   CSS Custom Properties (from Figma)
   ============================================ */
:root {
    /* Colors from Figma */
    --mintly-text-dark: #181B1A;
    --mintly-text-gray: #6A7771;
    --mintly-tag-text: #374537;
    --mintly-tag-bg: #E5E1D6;
    --mintly-button-bg: #4E614E;
    --mintly-button-hover: #3d4f3d;
    --mintly-bg-white: #FFFFFF;
    --mintly-border: #E8E8E8;
    
    /* Typography from Figma */
    --font-serif: 'Tobias', Georgia, 'Times New Roman', serif;
    --font-sans: 'Cerebri Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================
   Wrapper & Grid
   ============================================ */
.mintly-sessions-wrapper {
    font-family: var(--font-sans);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Break out of WordPress content container */
.entry-content .mintly-sessions-wrapper,
.wp-block-post-content .mintly-sessions-wrapper,
.page-content .mintly-sessions-wrapper,
article .mintly-sessions-wrapper,
main .mintly-sessions-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: max(24px, calc((100vw - 1400px) / 2 + 24px)) !important;
    padding-right: max(24px, calc((100vw - 1400px) / 2 + 24px)) !important;
}

/* Twenty Twenty-Five specific overrides */
.wp-block-group .mintly-sessions-wrapper,
[class*="wp-block"] .mintly-sessions-wrapper,
.has-global-padding .mintly-sessions-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.mintly-sessions-content {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* ============================================
   Grid Layout (table mode)
   ============================================ */
.mintly-sessions-grid {
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Table mode - uses CSS grid */
.mintly-sessions-grid.mintly-columns-2,
.mintly-sessions-grid.mintly-columns-3,
.mintly-sessions-grid.mintly-columns-4 {
    display: grid !important;
}

/* Grid columns with fixed count */
.mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-2 { 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
}
.mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-3 { 
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
}
.mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-4 { 
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 
}

/* Ensure cards fill grid cells in table mode */
.mintly-sessions-grid.mintly-columns-2 .mintly-session-card,
.mintly-sessions-grid.mintly-columns-3 .mintly-session-card,
.mintly-sessions-grid.mintly-columns-4 .mintly-session-card {
    min-width: 0 !important;
    width: 100% !important;
}

/* Earlier breakpoints for better button visibility */
@media (max-width: 1400px) {
    .mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-4 { 
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
    }
}

@media (max-width: 1100px) {
    .mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-3,
    .mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-4 { 
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    }
}

@media (max-width: 768px) {
    .mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-2,
    .mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-3,
    .mintly-sessions-wrapper .mintly-sessions-grid.mintly-columns-4 { 
        grid-template-columns: 1fr !important; 
    }
    .mintly-sessions-wrapper { padding: 16px; }
}

/* ============================================
   Horizontal Scroll Layout (carousel mode)
   ============================================ */
.mintly-sessions-grid.mintly-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    /* Override grid styles */
    grid-template-columns: none !important;
}

.mintly-sessions-grid.mintly-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Fixed card width in carousel mode */
.mintly-sessions-grid.mintly-carousel .mintly-session-card {
    flex: 0 0 420px !important;
    max-width: 420px !important;
    min-width: 420px !important;
    width: 420px !important;
    scroll-snap-align: start;
}

@media (max-width: 1200px) {
    .mintly-sessions-grid.mintly-carousel .mintly-session-card {
        flex: 0 0 360px !important;
        max-width: 360px !important;
        min-width: 360px !important;
        width: 360px !important;
    }
}

@media (max-width: 768px) {
    .mintly-sessions-grid.mintly-carousel .mintly-session-card {
        flex: 0 0 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
        width: 300px !important;
    }
}

@media (max-width: 480px) {
    .mintly-sessions-grid.mintly-carousel .mintly-session-card {
        flex: 0 0 calc(100vw - 48px) !important;
        max-width: calc(100vw - 48px) !important;
        min-width: calc(100vw - 48px) !important;
        width: calc(100vw - 48px) !important;
    }
}

/* Compact styles for carousel cards - only on smaller screens */
@media (max-width: 768px) {
    .mintly-carousel .mintly-session-card .mintly-card-content {
        padding: 12px !important;
    }

    .mintly-carousel .mintly-session-card .mintly-session-title {
        font-size: 16px !important;
    }

    .mintly-carousel .mintly-session-card .mintly-session-description {
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
    }

    .mintly-carousel .mintly-session-card .mintly-session-price {
        font-size: 13px !important;
    }

    .mintly-carousel .mintly-session-card .mintly-card-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 12px 12px !important;
    }

    .mintly-carousel .mintly-session-card .mintly-book-button {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }
}

/* ============================================
   Session Card
   ============================================ */
.mintly-session-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
    background: var(--mintly-bg-white);
    border: none;
    overflow: hidden;
}

/* ============================================
   Top Title Block (when photographer is filtered)
   ============================================ */
.mintly-card-top-title {
    padding: 16px 16px 8px;
    width: 100%;
    box-sizing: border-box;
}

.mintly-card-top-title .mintly-session-title {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 110%;
    color: var(--mintly-text-dark);
    margin: 0;
}

/* Card without photographer - adjust image */
.mintly-card-no-photographer .mintly-card-image {
    /* Image comes right after title */
}

/* ============================================
   Photographer Header (Name block)
   ============================================ */
.mintly-card-photographer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 16px 0;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
}

.mintly-photographer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.mintly-avatar-placeholder {
    background: var(--mintly-tag-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mintly-text-gray);
}

.mintly-avatar-placeholder svg {
    width: 28px;
    height: 28px;
}

.mintly-photographer-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
}

/* PHOTOGRAPHER: label - from Figma */
.mintly-photographer-label {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 145%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mintly-text-gray);
}

/* Photographer name - H6 from Figma */
.mintly-photographer-name {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0.02em;
    color: var(--mintly-text-dark);
}

/* ============================================
   Card Image
   ============================================ */
.mintly-card-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0;
}

.mintly-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mintly-session-card:hover .mintly-card-image img {
    transform: scale(1.02);
}

.mintly-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f3 0%, #e8e6e2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mintly-text-gray);
}

.mintly-image-placeholder svg {
    width: 64px;
    height: 64px;
    opacity: 0.4;
}

/* ============================================
   Card Content (description block)
   ============================================ */
.mintly-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 16px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* Session Title - H6 from Figma */
.mintly-session-title {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0.02em;
    color: var(--mintly-text-dark);
    margin: 0;
    width: 100%;
}

/* ============================================
   Tags (Styles block from Figma)
   ============================================ */
.mintly-session-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0;
    gap: 8px;
    width: 100%;
}

/* Property tag from Figma */
.mintly-tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
    gap: 6px;
    background: var(--mintly-tag-bg);
    border: none;
    border-radius: 0;
    box-sizing: border-box;
}

.mintly-tag svg {
    width: 16px;
    height: 16px;
    color: var(--mintly-tag-text);
    flex: none;
}

/* Tag text from Figma - 13px bold uppercase */
.mintly-tag span,
.mintly-tag {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--mintly-tag-text);
}

/* ============================================
   Description
   ============================================ */
.mintly-session-description {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: var(--mintly-text-dark);
    margin: 0;
    width: 100%;
}

/* ============================================
   Card Footer (price + Button block)
   ============================================ */
.mintly-card-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 16px 16px;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* Price & Seats block */
.mintly-price-slots {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 4px;
}

/* Price - Body Italic from Figma */
.mintly-price {
    font-family: var(--font-sans);
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: var(--mintly-text-dark);
}

.mintly-price-label,
.mintly-price-amount,
.mintly-price-per {
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}

/* Seats row */
.mintly-slots-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 6px;
}

/* Free slots text - Small from Figma */
.mintly-slots-badge {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mintly-slots-label,
.mintly-slots-count {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 145%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mintly-text-gray);
}

/* Urgency Badge from Figma */
.mintly-urgency-badge {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
    gap: 6px;
    border: 1px solid var(--mintly-text-gray);
    background: transparent;
    border-radius: 0;
    
    /* Extrasmall from Figma */
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 8px;
    line-height: 12px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--mintly-text-gray);
}

/* ============================================
   Book Now Button (from Figma)
   ============================================ */
.mintly-book-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 28px;
    gap: 8px;
    background: var(--mintly-button-bg);
    border-radius: 0;
    border: none;
    text-decoration: none;
    transition: background 0.2s ease;
    flex-shrink: 0;
    
    /* Button type from Figma */
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.mintly-book-button:hover {
    background: var(--mintly-button-hover);
    color: #FFFFFF;
}

.mintly-book-button svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: #FFFFFF;
}

/* ============================================
   Loading & Error States
   ============================================ */
.mintly-sessions-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--mintly-text-gray);
    gap: 16px;
}

.mintly-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--mintly-border);
    border-top-color: var(--mintly-button-bg);
    border-radius: 50%;
    animation: mintly-spin 0.8s linear infinite;
}

@keyframes mintly-spin {
    to { transform: rotate(360deg); }
}

.mintly-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 16px 20px;
    font-size: 14px;
}

/* ============================================
   Animations
   ============================================ */
.mintly-session-card {
    animation: mintly-fadeIn 0.4s ease-out;
}

@keyframes mintly-fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mintly-session-card:nth-child(1) { animation-delay: 0s; }
.mintly-session-card:nth-child(2) { animation-delay: 0.05s; }
.mintly-session-card:nth-child(3) { animation-delay: 0.1s; }
.mintly-session-card:nth-child(4) { animation-delay: 0.15s; }
.mintly-session-card:nth-child(5) { animation-delay: 0.2s; }
.mintly-session-card:nth-child(6) { animation-delay: 0.25s; }

/* ============================================
   Carousel Navigation
   ============================================ */
.mintly-carousel-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 0;
}

.mintly-carousel-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mintly-carousel-counter {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: #374537;
    min-width: 80px;
}

.mintly-carousel-counter span {
    font-weight: 700;
}

.mintly-carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #E2E2DF;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mintly-carousel-btn:hover {
    background: #F5F5F3;
    border-color: #374537;
}

.mintly-carousel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mintly-carousel-btn svg {
    width: 16px;
    height: 16px;
    stroke: #374537;
}

/* Dark theme navigation */
.mintly-theme-dark .mintly-carousel-counter {
    color: #E5E1D6;
}

.mintly-theme-dark .mintly-carousel-btn {
    border-color: rgba(229, 225, 214, 0.3);
}

.mintly-theme-dark .mintly-carousel-btn:hover {
    background: rgba(229, 225, 214, 0.1);
    border-color: #E5E1D6;
}

.mintly-theme-dark .mintly-carousel-btn svg {
    stroke: #E5E1D6;
}

/* ============================================
   DARK THEME - Photographer Page
   ============================================ */
.mintly-sessions-wrapper.mintly-theme-dark {
    background: #181B1A;
    max-width: 100%;
    padding: 0;
}

.mintly-theme-dark .mintly-sessions-content {
    max-width: 1380px;
    margin: 0 auto;
    padding: 40px 30px;
}

/* Dark theme text colors */
.mintly-theme-dark .mintly-session-title {
    color: #E5E1D6;
}

.mintly-theme-dark .mintly-session-description {
    color: rgba(229, 225, 214, 0.8);
}

.mintly-theme-dark .mintly-photographer-label {
    color: rgba(229, 225, 214, 0.7);
}

.mintly-theme-dark .mintly-photographer-name {
    color: #E5E1D6;
}

.mintly-theme-dark .mintly-tag {
    background: rgba(229, 225, 214, 0.15);
    color: #E5E1D6;
}

.mintly-theme-dark .mintly-tag svg {
    stroke: #E5E1D6;
}

.mintly-theme-dark .mintly-price,
.mintly-theme-dark .mintly-price-label,
.mintly-theme-dark .mintly-price-amount,
.mintly-theme-dark .mintly-price-per {
    color: #E5E1D6;
}

.mintly-theme-dark .mintly-slots-count,
.mintly-theme-dark .mintly-slots-label {
    color: rgba(229, 225, 214, 0.7);
    border-color: rgba(229, 225, 214, 0.3);
}

.mintly-theme-dark .mintly-card-footer {
    border-color: rgba(229, 225, 214, 0.15);
}

/* Dark Theme Header - Title Block from Figma */
.mintly-theme-dark .mintly-sessions-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 32px 24px 30px;
    gap: 24px;
    border-bottom: 1px solid #E2E2DF;
    margin-bottom: 40px;
}

/* H3 Title from Figma - 70px */
.mintly-theme-dark .mintly-sessions-title {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 70px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #E5E1D6;
    margin: 0;
    max-width: 704px;
}

/* Separator line under title */
.mintly-theme-dark .mintly-sessions-header {
    border-color: rgba(229, 225, 214, 0.3);
}

@media (max-width: 992px) {
    .mintly-theme-dark .mintly-sessions-title {
        font-size: 48px;
    }
}

@media (max-width: 640px) {
    .mintly-theme-dark .mintly-sessions-title {
        font-size: 36px;
    }
    .mintly-theme-dark .mintly-sessions-header {
        flex-direction: column;
        padding: 0 16px 24px;
    }
}

/* Dark Theme Grid - 3 columns with 30px gap */
.mintly-theme-dark .mintly-sessions-grid {
    gap: 30px;
}

/* Dark Theme Cards - 440px width on desktop */
.mintly-theme-dark .mintly-session-card {
    background: transparent;
    width: 100%;
}

/* Dark theme photographer header colors */
.mintly-theme-dark .mintly-photographer-label {
    color: #6A7771;
}

.mintly-theme-dark .mintly-photographer-name {
    color: #E5E1D6;
}

/* Dark Theme Image - 4:5 ratio, 550px height on desktop */
.mintly-theme-dark .mintly-card-image {
    aspect-ratio: 4 / 5;
}

/* Dark Theme Content Colors */
.mintly-theme-dark .mintly-session-title {
    color: #E5E1D6;
}

.mintly-theme-dark .mintly-session-description {
    color: #E5E1D6;
}

.mintly-theme-dark .mintly-price {
    color: #E5E1D6;
}

.mintly-theme-dark .mintly-slots-label,
.mintly-theme-dark .mintly-slots-count {
    color: #6A7771;
}

.mintly-theme-dark .mintly-urgency-badge {
    border-color: #6A7771;
    color: #6A7771;
}

/* ============================================
   Navigation Footer - Dark Theme
   ============================================ */
.mintly-nav-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 24px;
    margin-top: 24px;
}

/* Nav Left - Counter + Arrows */
.mintly-nav-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

/* Page Counter (01 / 24) */
.mintly-pagination-counter {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    text-transform: capitalize;
    color: #181B1A;
}

.mintly-theme-dark .mintly-pagination-counter {
    color: #E5E1D6;
}

/* Navigation Arrows */
.mintly-nav-arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.mintly-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(24, 27, 26, 0.2);
    border-radius: 24px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mintly-theme-dark .mintly-nav-arrow {
    border-color: rgba(229, 225, 214, 0.2);
}

.mintly-nav-arrow:hover {
    border-color: rgba(24, 27, 26, 0.4);
}

.mintly-theme-dark .mintly-nav-arrow:hover {
    border-color: rgba(229, 225, 214, 0.4);
}

.mintly-nav-arrow svg {
    width: 16px;
    height: 16px;
    color: #181B1A;
}

.mintly-theme-dark .mintly-nav-arrow svg {
    color: #E5E1D6;
}

.mintly-nav-arrow.mintly-arrow-left svg {
    transform: rotate(180deg);
}

/* See All Link */
.mintly-see-all {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    text-decoration: none;
    border-bottom: 1px solid var(--mintly-button-bg);
    transition: all 0.2s ease;
    
    /* Button type from Figma */
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--mintly-button-bg);
}

.mintly-see-all:hover {
    color: var(--mintly-button-hover);
    border-color: var(--mintly-button-hover);
}

.mintly-see-all svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .mintly-session-card {
        break-inside: avoid;
        box-shadow: none;
    }
    .mintly-book-button { display: none; }
}

/* ============================================
   SINGLE SESSION PAGE
   ============================================ */

/* Main Container - Full width to break out of theme constraints */
.mintly-single-session {
    font-family: var(--font-sans) !important;
    background: #FDF8F3 !important;
    padding: 32px 96px !important;
    min-height: 100vh;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative !important;
}

/* Back Navigation */
.mintly-single-back {
    margin-bottom: 16px;
}

.mintly-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 114%;
    color: #2E312A;
    transition: color 0.2s ease;
}

.mintly-back-link:hover {
    color: var(--mintly-button-bg);
}

.mintly-back-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Divider Line */
.mintly-single-divider {
    width: 100%;
    height: 1px;
    background: #D9D3C2;
    margin-bottom: 32px;
}

/* Two Column Layout - Using CSS Grid for better control */
.mintly-single-session .mintly-single-container {
    display: grid !important;
    grid-template-columns: 1fr 360px !important;
    gap: 48px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    align-items: start !important;
}

/* Main Content Column (Left) */
.mintly-single-session .mintly-single-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Session Title */
.mintly-single-title {
    width: 100%;
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 52px;
    line-height: 120%;
    color: #2E312A;
    margin: 0;
}

/* Main Image */
.mintly-single-image {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.mintly-single-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* Details Row */
.mintly-single-details {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

/* Detail Column */
.mintly-detail-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}

.mintly-detail-label {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 180%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #858071;
}

.mintly-detail-value {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 150%;
    color: #2E312A;
}

/* Description */
.mintly-single-description {
    width: 100%;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 200%;
    color: #2E312A;
}

/* What's Included */
.mintly-single-included {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.mintly-included-title {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    color: #2E312A;
    margin: 0;
}

.mintly-included-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 160%;
    color: #2E312A;
}

.mintly-included-list li {
    margin-bottom: 4px;
}

/* Sidebar Column (Right) */
.mintly-single-session .mintly-single-sidebar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Widget Wrapper */
.mintly-widget-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 32px;
}

/* Price Display */
.mintly-single-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid #D9D3C2;
}

.mintly-price-from {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #858071;
}

.mintly-single-price .mintly-price-value {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 120%;
    color: #2E312A;
}

.mintly-price-unit {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #858071;
}

/* Calendar Widget */
.mintly-calendar-widget {
    width: 100%;
    min-height: 400px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.mintly-calendar-widget wd-widget {
    width: 100%;
    min-height: 400px;
}

/* ============================================
   Single Session Responsive
   ============================================ */

/* Large desktop - two columns with grid */
@media (min-width: 900px) {
    .mintly-single-session .mintly-single-container {
        display: grid !important;
        grid-template-columns: 1fr 360px !important;
        gap: 48px !important;
    }
}

/* Tablet */
@media (max-width: 1200px) {
    .mintly-single-session {
        padding: 24px 48px !important;
    }
    
    .mintly-single-container {
        gap: 48px !important;
    }
    
    .mintly-single-title {
        font-size: 40px !important;
    }
}

/* Smaller screens - switch to single column */
@media (max-width: 899px) {
    .mintly-single-session {
        padding: 20px 24px !important;
    }
    
    .mintly-single-session .mintly-single-container {
        display: block !important;
    }
    
    .mintly-single-session .mintly-single-main {
        width: 100% !important;
        margin-bottom: 32px !important;
    }
    
    .mintly-single-session .mintly-single-title {
        font-size: 32px !important;
    }
    
    .mintly-single-session .mintly-single-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .mintly-single-session {
        padding: 16px !important;
    }
    
    .mintly-single-title {
        font-size: 28px !important;
    }
    
    .mintly-single-details {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .mintly-detail-column {
        width: 100% !important;
    }
    
    .mintly-single-description {
        font-size: 15px !important;
        line-height: 180% !important;
    }
    
    .mintly-single-price .mintly-price-value {
        font-size: 28px !important;
    }
}

/* Very small mobile */
@media (max-width: 400px) {
    .mintly-single-session {
        padding: 12px !important;
    }
    
    .mintly-single-title {
        font-size: 24px !important;
    }
    
    .mintly-single-image img {
        max-height: 300px !important;
    }
}

/* ============================================
   SINGLE SESSION PAGE - FULL DESIGN
   ============================================ */

/* Page Wrapper */
.mintly-single-session-page {
    font-family: var(--font-sans);
    color: var(--mintly-text-dark);
    background: #FDF8F3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   HERO BANNER SECTION
   ============================================ */
.mintly-hero {
    position: relative;
    width: 100%;
    min-height: 75vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 64px;
    box-sizing: border-box;
}

.mintly-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.mintly-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 800px;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Breadcrumb */
.mintly-breadcrumb {
    position: absolute;
    top: 24px;
    left: 24px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    color: #fff;
    z-index: 5;
}

.mintly-breadcrumb,
.mintly-breadcrumb a,
.mintly-breadcrumb span {
    color: rgba(255, 255, 255, 0.8);
}

.mintly-breadcrumb a:hover {
    color: #fff;
}

.mintly-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.mintly-breadcrumb a:hover {
    text-decoration: underline;
}

.mintly-breadcrumb span {
    margin: 0 8px;
}

.mintly-breadcrumb .current {
    opacity: 0.7;
    margin: 0;
}

/* Hero Title */
.mintly-hero-title {
    font-family: 'Tobias', var(--font-serif);
    font-weight: 400;
    font-size: 64px;
    line-height: 110%;
    margin: 0 0 16px 0;
    color: #fff;
}

/* Hero Description */
.mintly-hero-description {
    font-size: 16px;
    line-height: 160%;
    margin: 0 0 32px 0;
    opacity: 0.9;
    max-width: 600px;
    text-align: center;
}

/* Hero Buttons */
.mintly-hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
}

/* Hero Slider */
.mintly-hero-slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mintly-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.mintly-hero-slide.active {
    opacity: 1;
}

/* Hero Indicators */
.mintly-hero-indicators {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.mintly-hero-indicator {
    width: 80px;
    height: 3px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.mintly-hero-indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

.mintly-hero-indicator.active {
    background: #fff;
}

/* Button Styles */
.mintly-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mintly-btn svg {
    width: 16px;
    height: 16px;
}

.mintly-btn-outline {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.mintly-btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
}

.mintly-btn-solid {
    background: #fff;
    border: 1px solid #fff;
    color: var(--mintly-text-dark);
}

.mintly-btn-solid:hover {
    background: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.9);
}

.mintly-btn-dark {
    border-color: var(--mintly-text-dark);
    color: var(--mintly-text-dark);
}

.mintly-btn-dark:hover {
    background: var(--mintly-text-dark);
    color: #fff;
}

/* Hero Photographer Badge */
.mintly-hero-photographer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.mintly-hero-photographer .mintly-photographer-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

.mintly-hero-photographer .mintly-photographer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.mintly-hero-photographer .mintly-photographer-label {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    opacity: 0.8;
    color: #fff;
}

.mintly-hero-photographer .mintly-photographer-name {
    font-family: 'Tobias', var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    color: #fff;
}

/* ============================================
   ABOUT MINI-SESSION SECTION
   ============================================ */
.mintly-about-section {
    padding: 80px 32px;
    background: #fff;
}

.mintly-about-container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    background: #fff;
    padding: 24px;
    border: 1px solid #E5E5E5;
}

.mintly-about-image {
    flex: 0 0 500px;
    max-width: 500px;
}

.mintly-about-divider {
    flex: 0 0 1px;
    width: 1px;
    background: #E5E5E5;
    margin: 0 40px;
    align-self: stretch;
}

.mintly-about-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mintly-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Section Title */
.mintly-section-title {
    font-family: 'Tobias', var(--font-serif);
    font-weight: 400;
    font-size: 42px;
    line-height: 110%;
    margin: 0 0 24px 0;
    color: var(--mintly-text-dark);
}

/* Tags Row */
.mintly-tags-row,
.mintly-details-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.mintly-info-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--mintly-tag-bg);
    color: var(--mintly-tag-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.mintly-info-tag svg {
    width: 14px;
    height: 14px;
    stroke: var(--mintly-tag-text);
}

/* Address */
.mintly-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: var(--mintly-tag-bg);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--mintly-tag-text);
}

.mintly-address svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* About Text */
.mintly-about-text {
    font-size: 15px;
    line-height: 170%;
    color: var(--mintly-text-dark);
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Read More Link */
.mintly-read-more {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mintly-text-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mintly-read-more:hover {
    color: var(--mintly-button-bg);
}

/* ============================================
   GALLERY / MOODBOARD SECTION
   ============================================ */
.mintly-gallery-section {
    padding: 60px 64px;
    background: #FDF8F3;
}

.mintly-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto 32px;
}

.mintly-gallery-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mintly-gallery-counter {
    font-family: 'Tobias', var(--font-serif);
    font-size: 16px;
    color: var(--mintly-text-gray);
}

.mintly-gallery-counter .current {
    color: var(--mintly-text-dark);
    font-weight: 500;
}

.mintly-gallery-arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--mintly-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mintly-gallery-arrow:hover {
    background: var(--mintly-text-dark);
    border-color: var(--mintly-text-dark);
    color: #fff;
}

.mintly-gallery-arrow svg {
    stroke: currentColor;
}

.mintly-gallery-track-wrapper {
    max-width: 100%;
    overflow: hidden;
    margin: 0 -64px;
    padding: 0 64px;
}

.mintly-gallery-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
}

.mintly-gallery-slide {
    flex: 0 0 calc(25% - 18px);
    min-width: 250px;
}

.mintly-gallery-slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* ============================================
   ABOUT ROOM SECTION
   ============================================ */
.mintly-room-section {
    padding: 80px 64px;
    background: #FDF8F3;
}

.mintly-room-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    max-width: 1200px;
    margin: 0 auto;
}

.mintly-room-content {
    display: flex;
    flex-direction: column;
}

.mintly-room-text {
    font-size: 15px;
    line-height: 170%;
    color: var(--mintly-text-dark);
    margin-bottom: 32px;
    flex-grow: 1;
}

/* Room Gallery Grid */
.mintly-room-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.mintly-room-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* ============================================
   PHOTOGRAPHER SECTION
   ============================================ */
.mintly-photographer-section {
    padding: 80px 64px;
    background: #FDF8F3;
}

.mintly-photographer-container {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 64px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.mintly-photographer-photo img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.mintly-photographer-details {
    padding-top: 20px;
}

/* Photographer Header */
.mintly-photographer-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.mintly-photographer-avatar-small {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.mintly-photographer-name-large {
    font-family: 'Tobias', var(--font-serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 110%;
    margin: 0;
    color: var(--mintly-text-dark);
}

/* Specializations */
.mintly-photographer-specs {
    margin-bottom: 24px;
}

.mintly-spec-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--mintly-text-gray);
    margin-bottom: 12px;
}

.mintly-spec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mintly-spec-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--mintly-tag-bg);
    color: var(--mintly-tag-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Bio */
.mintly-photographer-bio {
    font-size: 15px;
    line-height: 170%;
    color: var(--mintly-text-dark);
    margin-bottom: 32px;
}

/* Photographer Buttons */
.mintly-photographer-buttons {
    display: flex;
    gap: 16px;
}

/* ============================================
   WIDGET SECTION
   ============================================ */
.mintly-widget-section {
    padding: 80px 64px;
    background: #fff;
}

.mintly-widget-container {
    max-width: 1000px;
    margin: 0 auto;
}

.mintly-widget-section wd-widget {
    width: 100%;
    min-height: 500px;
}

/* ============================================
   SINGLE SESSION PAGE RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
    .mintly-hero {
        padding: 60px 40px 40px;
    }
    
    .mintly-hero-title {
        font-size: 48px;
    }
    
    .mintly-about-section,
    .mintly-gallery-section,
    .mintly-room-section,
    .mintly-photographer-section,
    .mintly-widget-section {
        padding: 60px 40px;
    }
    
    .mintly-about-container {
        grid-template-columns: 300px 1fr;
        gap: 40px;
        padding: 32px;
    }
    
    .mintly-photographer-container {
        grid-template-columns: 320px 1fr;
        gap: 40px;
    }
}

@media (max-width: 900px) {
    .mintly-hero {
        min-height: 400px;
        padding: 48px 24px 32px;
    }
    
    .mintly-hero-title {
        font-size: 40px;
    }
    
    .mintly-hero-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .mintly-about-section,
    .mintly-gallery-section,
    .mintly-room-section,
    .mintly-photographer-section,
    .mintly-widget-section {
        padding: 48px 24px;
    }
    
    .mintly-about-container {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .mintly-about-image {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }
    
    .mintly-about-divider {
        display: none !important;
    }
    
    .mintly-about-content {
        width: 100% !important;
    }
    
    .mintly-room-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .mintly-photographer-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .mintly-photographer-photo img {
        max-height: 400px;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .mintly-gallery-track-wrapper {
        margin: 0 -24px;
        padding: 0 24px;
    }
    
    .mintly-gallery-slide {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 600px) {
    .mintly-hero {
        min-height: 350px;
        padding: 32px 16px 24px;
    }
    
    .mintly-hero-title {
        font-size: 32px;
    }
    
    .mintly-hero-description {
        font-size: 14px;
    }
    
    .mintly-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 11px;
    }
    
    .mintly-about-section,
    .mintly-gallery-section,
    .mintly-room-section,
    .mintly-photographer-section,
    .mintly-widget-section {
        padding: 40px 16px;
    }
    
    .mintly-about-container {
        padding: 24px;
    }
    
    .mintly-section-title {
        font-size: 26px;
    }
    
    .mintly-tags-row,
    .mintly-details-row {
        gap: 8px;
    }
    
    .mintly-info-tag {
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .mintly-gallery-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .mintly-gallery-track-wrapper {
        margin: 0 -16px;
        padding: 0 16px;
    }
    
    .mintly-gallery-slide {
        flex: 0 0 calc(80%);
        min-width: 200px;
    }
    
    .mintly-gallery-slide img {
        height: 220px;
    }
    
    .mintly-room-gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .mintly-photographer-name-large {
        font-size: 28px;
    }
    
    .mintly-photographer-buttons {
        flex-direction: column;
        gap: 12px;
    }
}