/* my-php-website/assets/css/banner_grid.css (ব্যানার গ্রিডের জন্য আলাদা CSS) */

.banner-grid-container-from-editor {
    display: grid;
    /* === সমাধান: ব্যানারগুলোর মাঝের ফাঁকা জায়গা (gap) দূর করা হয়েছে === */
    gap: 0;
    margin: 30px 0;
    width: 100%;
    box-sizing: border-box;
}

.pre-designed-banner-item-wrapper {
    width: 100%;
}

.pre-designed-banner-item {
    position: relative;
    width: 100%;
    /* aspect-ratio is set dynamically inline from PHP based on canvas dimensions */
    background-size: cover;
    background-position: center;
    /* === সমাধান: বর্ডার রেডিয়াস 0 করা হয়েছে চারকোনা (sharp corners) করার জন্য === */
    border-radius: 0;
    overflow: hidden;
    /* শ্যাডো ঐচ্ছিক, আপনি চাইলে রাখতে বা মুছতে পারেন। আপাতত রাখা হলো। */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
}

.pre-designed-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 633px; /* ডিফল্ট ক্যানভাস সাইজ */
    height: 377px;
    transform-origin: top left; 
    pointer-events: none;
}

.banner-element {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto; /* লিংকে ক্লিক করার জন্য */
}

.pre-designed-banner-item:hover .zoom-on-hover-element {
    transform: scale(1.1);
}


/* হেডিং কন্টেইনার এবং কন্টেন্টকে সঠিকভাবে সাজানো হয়েছে */
.banner-element.heading-block {
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner-element.heading-block h1 {
    margin: 0;
    padding: 10px;
    width: 100%;
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    line-height: normal; 
}

.banner-element.button-block a {
    text-decoration: none; 
    display: block; 
    width: 100%; 
    height: 100%;
}

.banner-element.button-block button {
    width: 100%; 
    height: 100%; 
    font-size: inherit; 
    font-weight: bold; 
    color: white;
    background-color: #3498db; 
    border: none; 
    /* বাটনের বর্ডার রেডিয়াসও চাইলে 0 করতে পারেন, আপাতত আগের মতোই 5px রাখা হয়েছে */
    border-radius: 5px; 
    padding: 10px 20px;
    cursor: pointer; 
    box-sizing: border-box; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* কলাম ক্লাসের জন্য গ্রিড লেআউট */
.banner-grid-container-from-editor.grid-cols-1 { grid-template-columns: 1fr; }
.banner-grid-container-from-editor.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.banner-grid-container-from-editor.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.banner-grid-container-from-editor.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.banner-grid-container-from-editor.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }


/* === রেসপন্সিভ স্টাইল === */

/* ট্যাবলেট ও মোবাইল ভিউ (৯৯১পিএক্স এবং এর নিচে) */
@media (max-width: 991px) {
    .banner-grid-container-from-editor.grid-cols-1,
    .banner-grid-container-from-editor.grid-cols-2,
    .banner-grid-container-from-editor.grid-cols-3,
    .banner-grid-container-from-editor.grid-cols-4,
    .banner-grid-container-from-editor.grid-cols-5 {
        grid-template-columns: 1fr !important;
    }
}