/*
 * MBT My Bookmark Tiles — Front-end Tile Grid
 * Version 2.1.0
 *
 * Layout strategy — consistent across all breakpoints:
 *   Grid:  display:grid, auto-fill with fixed tile size, justify-content:center
 *          The grid is always full container width. auto-fill places as many
 *          tiles as fit; justify-content:center distributes spare space evenly
 *          on both sides of each row — so a 4-tile row on a wide desktop
 *          centres naturally rather than left-aligning or spreading.
 *   Wrap:  padding-inline = gap on mobile, so side gutters match inter-tile
 *          spacing visually (same rhythm as iOS home screen).
 *          Padding removed at 480px+ where theme padding is sufficient.
 *
 * Icon fill mode (--mbt-icon-fill):
 *   contain  — icon scales to fit inside the tile, letterboxed (default)
 *   cover    — favicon fills the entire tile square, cropped to fit
 *              Set via Settings → Favicon style, written by PHP.
 *
 * Settings-driven custom properties (written by PHP inline style):
 *   --mbt-text-color  — label colour (dark/light, from Settings)
 *   --mbt-user-bg     — user's chosen tile colour. Separate from --mbt-bg
 *                       so dark mode only activates when no custom colour set.
 *   --mbt-opacity     — tile opacity (from Settings)
 *   --mbt-icon-fill   — contain | cover (from Settings, default: contain)
 */

/* -------------------------------------------------------------------------
   Wrap
   ------------------------------------------------------------------------- */

.mbt-tiles-wrap {
	--mbt-tile-size:    58px;
	--mbt-icon-size:    28px;
	--mbt-gap:          14px;
	--mbt-radius:       14px;

	--mbt-bg:           #f0f0f4;
	--mbt-user-bg:      ;               /* empty → dark mode fallback active  */
	--mbt-bg-hover:     #e0e0e8;
	--mbt-border:       1px solid rgba(0,0,0,0.07);
	--mbt-shadow:       0 1px 3px rgba(0,0,0,0.07);
	--mbt-shadow-hover: 0 4px 14px rgba(0,0,0,0.13);

	--mbt-text-color:   #3f3f46;    /* overridden by PHP */
	--mbt-opacity:      1;          /* overridden by PHP */
	--mbt-font-size:    0.68rem;
	--mbt-icon-fill:    contain;    /* overridden by PHP: contain | cover */

	width:          100%;
	box-sizing:     border-box;
	padding-top:    24px;
	padding-inline: var(--mbt-gap);  /* matches gap → side gutters = inter-tile gaps */
}

/* -------------------------------------------------------------------------
   Collection description
   ------------------------------------------------------------------------- */

.mbt-collection-description {
	margin:      0 0 1.25rem 0;
	font-size:   0.95rem;
	color:       var(--mbt-text-color);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Grid
   Mobile:  repeat(4, 1fr) — exactly 4 columns always. 1fr fills the
            container so side gutters equal inter-tile gaps. The tile BOX
            is capped at --mbt-tile-size so it never overflows its column.
   Tablet+: auto-fill — tiles flow naturally, justify-content:center
            keeps rows centred so a short list doesn't left-align.
   ------------------------------------------------------------------------- */

.mbt-tiles-grid {
	display:               grid;
	grid-template-columns: repeat( 4, 1fr );
	gap:                   var(--mbt-gap);
	justify-content:       center;
}

@media ( min-width: 480px ) {
	.mbt-tiles-grid {
		grid-template-columns: repeat( auto-fit, var(--mbt-tile-size) );
	}
}

/* -------------------------------------------------------------------------
   Tile anchor — on mobile fills its 1fr column; on tablet+ fixed to tile size
   ------------------------------------------------------------------------- */

.mbt-tile {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	width:           100%;           /* fills 1fr column on mobile */
	text-decoration: none;
	color:           var(--mbt-text-color);
}

@media ( min-width: 480px ) {
	.mbt-tile {
		width: var(--mbt-tile-size);  /* fixed once auto-fill takes over */
	}
}

.mbt-tile:hover .mbt-tile__box,
.mbt-tile:focus-visible .mbt-tile__box {
	background: var(--mbt-bg-hover);
	box-shadow: var(--mbt-shadow-hover);
	transform:  translateY(-2px);
}

.mbt-tile:focus-visible { outline: none; }

/* -------------------------------------------------------------------------
   Tile box — fixed square, explicit width+height (no aspect-ratio tricks)
   ------------------------------------------------------------------------- */

.mbt-tile__box {
	width:           var(--mbt-tile-size);
	height:          var(--mbt-tile-size);
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;          /* needed for cover mode icon bleed */
	background:      var(--mbt-user-bg, var(--mbt-bg));
	border:          var(--mbt-border);
	border-radius:   var(--mbt-radius);
	box-shadow:      var(--mbt-shadow);
	opacity:         var(--mbt-opacity);
	transition:      background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* -------------------------------------------------------------------------
   Icon — two modes driven by --mbt-icon-fill
   contain: scales to fit, preserves letterbox gap (default)
   cover:   fills tile entirely, cropped. Icon loses border-radius from box;
            the box's overflow:hidden + border-radius handle the rounding.
   ------------------------------------------------------------------------- */

.mbt-tile__icon {
	display:    block;
	object-fit: var(--mbt-icon-fill);
}

/* contain mode: fixed size with padding effect from the box background */
.mbt-tiles-wrap[style*="--mbt-icon-fill:contain"] .mbt-tile__icon,
.mbt-tiles-wrap:not([style*="--mbt-icon-fill"]) .mbt-tile__icon {
	width:         var(--mbt-icon-size);
	height:        var(--mbt-icon-size);
	border-radius: 4px;
}

/* cover mode: fill the whole tile square */
.mbt-tiles-wrap[style*="--mbt-icon-fill:cover"] .mbt-tile__icon {
	width:         100%;
	height:        100%;
	border-radius: 0;   /* box overflow:hidden + border-radius handles rounding */
}

/* -------------------------------------------------------------------------
   Label
   ------------------------------------------------------------------------- */

.mbt-tile__label {
	width:       min( var(--mbt-tile-size), 100% );  /* caps at tile size, fills column on tiny phones */
	padding-top: 5px;
	font-size:   var(--mbt-font-size);
	color:       var(--mbt-text-color);
	text-align:  center;
	line-height: 1.3;
	min-height:  calc( var(--mbt-font-size) * 1.3 * 2 );
	word-break:  break-word;
	opacity:     var(--mbt-opacity);

	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* -------------------------------------------------------------------------
   Admin notices
   ------------------------------------------------------------------------- */

.mbt-notice {
	padding: 8px 12px; border-radius: 4px; font-size: 0.9rem; margin: 0.5rem 0;
}
.mbt-notice--error {
	background: #fef2f2; border-left: 4px solid #ef4444; color: #7f1d1d;
}
.mbt-notice--info {
	background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e3a5f;
}

/* -------------------------------------------------------------------------
   Responsive breakpoints — only tile size and gap change; grid strategy
   stays the same (auto-fill + justify-content:center) at every breakpoint
   ------------------------------------------------------------------------- */

@media ( min-width: 480px ) {
	.mbt-tiles-wrap {
		--mbt-tile-size: 72px;
		--mbt-icon-size: 34px;
		--mbt-gap:       16px;
		padding-inline:  0;
	}
}

@media ( min-width: 769px ) {
	.mbt-tiles-wrap {
		--mbt-tile-size: 80px;
		--mbt-icon-size: 38px;
		--mbt-gap:       20px;
	}
}

@media ( min-width: 1200px ) {
	.mbt-tiles-wrap {
		--mbt-tile-size: 88px;
		--mbt-icon-size: 42px;
	}
}

/* -------------------------------------------------------------------------
   Dark mode — only --mbt-bg tokens; never --mbt-user-bg
   ------------------------------------------------------------------------- */

@media ( prefers-color-scheme: dark ) {
	.mbt-tiles-wrap {
		--mbt-bg:       #2a2a3a;
		--mbt-bg-hover: #3a3a4a;
		--mbt-border:   1px solid rgba(255,255,255,0.09);
		--mbt-shadow:   0 1px 4px rgba(0,0,0,0.30);
	}
}