/**
 * MGS Blocks - Frontend Styling
 * Include this CSS on your frontend to style the blocks
 */

/* Base block styles */
.mgs-block {
    margin-bottom: 1.5rem;
}

.mgs-block:last-child {
    margin-bottom: 0;
}

/* Alignment helper */
.text-justify {
    text-align: justify;
}

/* Text block */
.mgs-block-text {
    line-height: 1.7;
}

.mgs-block-text p:last-child {
    margin-bottom: 0;
}

/* Image block */
.mgs-block-image {
    margin: 0;
}

.mgs-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.mgs-block-image figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    text-align: center;
}

/* Video block */
.mgs-block-video {
    margin: 0 auto;
}

.mgs-block-video .ratio {
    position: relative;
    width: 100%;
}

.mgs-block-video .ratio-16x9 {
    padding-bottom: 56.25%;
}

.mgs-block-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 4px;
}

/* Gallery block */
.mgs-block-gallery .row {
    display: flex;
    flex-wrap: wrap;
    margin: -0.25rem;
}

.mgs-block-gallery [class*="col-"] {
    padding: 0.25rem;
}

.mgs-block-gallery img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.mgs-block-gallery a:hover img {
    opacity: 0.85;
}

/* Button block */
.mgs-block-button {
    padding: 0.5rem 0;
}

.mgs-block-button .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.mgs-block-button .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.mgs-block-button .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

/* Button styles - customize these colors to match your site */
.mgs-block-button .btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
}

.mgs-block-button .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.mgs-block-button .btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border: 1px solid #6c757d;
}

.mgs-block-button .btn-success {
    color: #fff;
    background-color: #198754;
    border: 1px solid #198754;
}

.mgs-block-button .btn-danger {
    color: #fff;
    background-color: #dc3545;
    border: 1px solid #dc3545;
}

.mgs-block-button .btn-warning {
    color: #000;
    background-color: #ffc107;
    border: 1px solid #ffc107;
}

.mgs-block-button .btn-info {
    color: #000;
    background-color: #0dcaf0;
    border: 1px solid #0dcaf0;
}

.mgs-block-button .btn-light {
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
}

.mgs-block-button .btn-dark {
    color: #fff;
    background-color: #212529;
    border: 1px solid #212529;
}

.mgs-block-button .btn-outline-primary {
    color: #0d6efd;
    background-color: transparent;
    border: 1px solid #0d6efd;
}

.mgs-block-button .btn-outline-primary:hover {
    color: #fff;
    background-color: #0d6efd;
}

/* Divider block */
.mgs-block-divider hr {
    margin: 0;
    border: 0;
    border-top-width: 1px;
    opacity: 1;
}

/* Quote block */
.mgs-block-quote {
    padding: 1rem 1.5rem;
    margin: 0;
    border-left: 4px solid #dee2e6;
    background-color: #f8f9fa;
    border-radius: 0 4px 4px 0;
}

.mgs-block-quote p {
    margin-bottom: 0.5rem;
    font-style: italic;
    font-size: 1.1rem;
}

.mgs-block-quote .blockquote-footer {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.mgs-block-quote .blockquote-footer cite {
    font-weight: 600;
}

/* Quote style variations */
.mgs-block-quote-modern {
    border-left: none;
    border-radius: 4px;
    text-align: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
}

.mgs-block-quote-modern::before {
    content: '"';
    display: block;
    font-size: 3rem;
    line-height: 1;
    color: #adb5bd;
}

.mgs-block-quote-minimal {
    background: transparent;
    border-left: 2px solid #dee2e6;
    padding: 0.5rem 1rem;
}

/* Loading state */
.mgs-blocks-loading {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
}

/* Responsive grid helpers for gallery */
@media (max-width: 768px) {
    .mgs-block-gallery .col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .mgs-block-gallery .col-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Text alignment utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Icon block */
.mgs-block-icon {
    margin: 1.25rem 0;
}

.mgs-block-icon .mgs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mgs-block-icon .mgs-icon-circle {
    border-radius: 999px;
}

.mgs-block-icon .mgs-icon-link {
    text-decoration: none;
}

/* Columns block */
.mgs-block-columns {
    margin: 1.5rem 0;
}

.mgs-block-columns .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75rem;
}

.mgs-block-columns .row > [class*="col-"] {
    padding: 0 0.75rem;
}

.mgs-column-content {
    height: 100%;
    padding: 1rem;
    border-radius: 4px;
}

/* Nested blocks within columns */
.mgs-nested-block {
    margin-bottom: 1rem;
}

.mgs-nested-block:last-child {
    margin-bottom: 0;
}

/* Five column layout - Bootstrap doesn't have col-5, so we use flex */
.mgs-columns-1-5-1-5-1-5-1-5-1-5 .col-md {
    flex: 0 0 20%;
    max-width: 20%;
}

/* Responsive columns */
@media (max-width: 768px) {
    .mgs-block-columns .row > [class*="col-md"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    
    .mgs-block-columns .row > [class*="col-md"]:last-child {
        margin-bottom: 0;
    }
}

/* List block */
.mgs-block-list {
    margin: 1rem 0;
}

.mgs-block-list ul {
    margin: 0;
    padding-left: 1.5rem;
    list-style-type: disc !important;
}

.mgs-block-list ol {
    margin: 0;
    padding-left: 1.5rem;
    list-style-type: decimal !important;
}

.mgs-block-list ul li,
.mgs-block-list ol li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    display: list-item !important;
}

.mgs-block-list ul li::marker {
    font-size: 1em;
}

.mgs-block-list ol li::marker {
    font-weight: 500;
}

.mgs-block-list li:last-child {
    margin-bottom: 0;
}

.mgs-block-list .mgs-icon-list {
    padding-left: 0;
    list-style: none;
}

.mgs-block-list .mgs-icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    list-style: none;
}

.mgs-block-list .mgs-icon-list li i {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

/* Icon list items (div-based) */
.mgs-block-list .mgs-icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.mgs-block-list .mgs-icon-list-item:last-child {
    margin-bottom: 0;
}

.mgs-block-list .mgs-icon-list-item i {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.mgs-block-list .mgs-icon-list-item span {
    flex: 1;
}

/* Slider block */
.mgs-block-slider {
    margin: 1rem 0;
}

.mgs-block-slider .carousel {
    border-radius: 8px;
    overflow: hidden;
}

.mgs-block-slider .carousel-inner {
    border-radius: 8px;
}

.mgs-block-slider .carousel-item img {
    object-fit: cover;
    width: 100%;
}

.mgs-block-slider .carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    bottom: 1.5rem;
}

.mgs-block-slider .carousel-caption p {
    margin: 0;
    font-size: 0.9rem;
}

.mgs-block-slider .carousel-indicators {
    margin-bottom: 0.5rem;
}

.mgs-block-slider .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 4px;
    opacity: 0.5;
}

.mgs-block-slider .carousel-indicators button.active {
    opacity: 1;
}

.mgs-block-slider .carousel-control-prev,
.mgs-block-slider .carousel-control-next {
    width: 10%;
    opacity: 0.7;
}

.mgs-block-slider .carousel-control-prev:hover,
.mgs-block-slider .carousel-control-next:hover {
    opacity: 1;
}

/* Nested slider (smaller in columns) */
.mgs-nested-block .mgs-block-slider .carousel-caption {
    bottom: 0.5rem;
}

.mgs-nested-block .mgs-block-slider .carousel-caption p {
    font-size: 0.75rem;
}